@cloudflare/realtimekit-ui 1.1.0 → 1.1.1-staging.1

package/dist/collection/components/rtk-markdown-view/rtk-markdown-view.js

@@ -76,7 +76,7 @@ export class RtkMarkdownView {
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = extractReplyBlock(slicedMessage, true);
         const withoutReply = stripOutReplyBlock(slicedMessage);
-        return (h("p", { key: '2c21b4c1dc9f18a17048f0827e552ffb8d595eee', class: "markdown-message" }, withReply.length !== 0 && h("blockquote", { key: 'f6ff3e02781136f2fb5f3e68dbbeac39430b6386' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (h("p", { key: 'b4114b74658b0311835f31ea387e47ef9323ef4f', class: "markdown-message" }, withReply.length !== 0 && h("blockquote", { key: 'cc726294f8b71999f6fa48442b40419f17e3c049' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
     static get is() { return "rtk-markdown-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-meeting/rtk-meeting.js

@@ -22,7 +22,7 @@ export class RtkMeeting {
         /** Since RtkMeeting by design works as a provider for component, to be in sync with other providers, added provider id */
         this.providerId = 'provider-' + Math.floor(Math.random() * 100);
         this.roomJoinedListener = () => {
-            this.updateStates({ meeting: 'joined' });
+            this.updateStates({ meeting: 'joined', joinError: undefined });
         };
         this.waitlistedListener = () => {
             this.updateStates({ meeting: 'waiting' });
@@ -231,7 +231,15 @@ export class RtkMeeting {
                 this.updateStates({ meeting: 'setup' });
             }
             else {
-                meeting.joinRoom();
+                meeting
+                    .joinRoom()
+                    .then(() => {
+                    this.updateStates({ joinError: undefined });
+                })
+                    .catch((err) => {
+                    const message = (err === null || err === void 0 ? void 0 : err.message) ? err.message : this.t('network.lost_extended');
+                    this.updateStates({ joinError: message });
+                });
             }
         }
         window.removeEventListener('rtkError', this.authErrorListener);

package/dist/collection/components/rtk-menu/rtk-menu.js

@@ -59,7 +59,7 @@ export class RtkMenu {
         });
     }
     render() {
-        return (h(Host, { key: '98d1a73c1fdd151945433a13dc1d9f11cfaaeb05' }, h("span", { key: '5cb225dca906f51ea4f9cfe999840af35cbbf865', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
+        return (h(Host, { key: '65dc1faca548d5222533251ff175db56e37d4251' }, h("span", { key: '68502e98e56a32200bfdea312cb137bcffc9df6b', id: "trigger", ref: (el) => (this.triggerEl = el), onClick: () => {
                 this.clickedThis = true;
                 if (this.menuListEl.style.display !== 'block') {
                     this.menuListEl.style.display = 'block';
@@ -68,7 +68,7 @@ export class RtkMenu {
                 else {
                     this.menuListEl.style.display = 'none';
                 }
-            } }, h("slot", { key: '75146b82e06b27ec57e85d741f42b6112d740334', name: "trigger" })), h("span", { key: 'ef16bf3d6197fd16fa7fb9dca36bc97f9cafec52', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: 'fa8644e4eff65fa5832d80cd53a70e626ea0b1e9' }))));
+            } }, h("slot", { key: 'fa0deae3dcf9ed4b8c47ff9695c3ef39fefc014e', name: "trigger" })), h("span", { key: '9e618bf62212c2c04e59ff99bb0eec6cb9835707', part: "menu-list", id: "menu-list", ref: (el) => (this.menuListEl = el) }, h("slot", { key: '4836bb1ed6a82243264e428d2c4a5dc1228bada1' }))));
     }
     static get is() { return "rtk-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-menu-item/rtk-menu-item.js

@@ -29,7 +29,7 @@ export class RtkMenuItem {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: 'd9b20b45e47b9fe8ab36a87a66eac6386b4c678c', class: { [this.menuVariant]: true } }, h("slot", { key: '639bd9af7b8ecd614ea87a21906e250023889a1c', name: "start" }), h("slot", { key: '9b6aa572707a1f78c8f82873b40132ec09290404' }), h("slot", { key: '02c7034af853977922e5cf3ac30f88e5f0148d75', name: "end" })));
+        return (h(Host, { key: 'daeee3f1da3b66a803a149013b5973d48fd5c8b5', class: { [this.menuVariant]: true } }, h("slot", { key: 'd71253130e5c910a3112260898049e00a1e4088e', name: "start" }), h("slot", { key: '8c93c1bd422d1fcb667438373199bff23bcc7a3a' }), h("slot", { key: 'e41161c7d4b5fb2652ddc9bda01d57793f144096', name: "end" })));
     }
     static get is() { return "rtk-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-menu-list/rtk-menu-list.js

@@ -27,7 +27,7 @@ export class RtkMenuList {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '0ac5ed2be7991106090b3ca0aa5a66a59f0e8250', class: { [this.menuVariant]: true } }, h("slot", { key: 'cd8312cfd2de7eeb7d590e4189f482d620f59ef8' })));
+        return (h(Host, { key: '747bcb38ca155d89fd5ae2c5fa2e667ad1e96a2f', class: { [this.menuVariant]: true } }, h("slot", { key: '5e9137c067847c3c4ef2defdcc958c077b821621' })));
     }
     static get is() { return "rtk-menu-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-message-list-view/rtk-message-list-view.js

@@ -260,11 +260,11 @@ export class RtkMessageListView {
         this.updateTotalHeight();
     }
     render() {
-        return (h("div", { key: 'f01cd22002f542b67a7ca26773cf729a11969ebd', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: '0f689c170ef60c6504b60b97003c8357e96c55f0', class: "scroller" }, h("div", { key: 'fd6049a7ef01203befb164ca74195c58de6af1e8', style: {
+        return (h("div", { key: '9c8a4073886acf540a8beeea0ac31f865231f771', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: 'c64abddfc09ec7c88305b732df889f9de0597b53', class: "scroller" }, h("div", { key: 'c3e94f33890509b22f2b89022a76865f6776b217', style: {
                 height: `${this.totalHeight}px`,
-            } }), h("div", { key: 'd8e7bcadcb7fc673c10340a833aa6f165c002822', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '60ffb8b2bd40c001e72982830b523efe43784c07', class: "content", style: {
+            } }), h("div", { key: 'f8c95faa0af4b1f31465a113707f0e4f753dadad', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '02d045f8c54072388c3c7df52ff4c92f2438a545', class: "content", style: {
                 transform: `translateY(${this.getRangeSize(0, this.range.start)}px)`,
-            } }, this.isFetching && (h("div", { key: '65952d03af783bc807d6fd54047bfbffadf075e3', class: "loader" }, h("rtk-spinner", { key: 'f90da04d11e84ea6b2218df02eb5daa55fd7dfe7', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
+            } }, this.isFetching && (h("div", { key: '7ba90240987e1ecfb553d69bd7465cb20bb86274', class: "loader" }, h("rtk-spinner", { key: '2fa19c46da125e4c5280625aefdf555f09ce2faa', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
     }
     static get is() { return "rtk-message-list-view"; }
     static get originalStyleUrls() {

package/dist/collection/components/rtk-more-toggle/rtk-more-toggle.js

@@ -53,10 +53,10 @@ export class RtkMoreToggle {
     }
     render() {
         const text = this.t('more');
-        return (h(Host, { key: 'e38ef12edf602c1c0a2f747e037559d91a2bb758', title: text }, this.states.activeMoreMenu && (h("div", { key: 'cbe27d79e4f10a0f7d35b94c80d378b251ae9005', class: "more-menu" }, h("slot", { key: '42f1083f8b554489bdf5795a595191f157048f5a', name: "more-elements" }))), h("rtk-controlbar-button", { key: 'd65281e925c0a77e22fb7f53518a915ddccdaf04', size: this.size, iconPack: this.iconPack, onClick: (e) => {
+        return (h(Host, { key: '16c3abc8550c71c16a99c3fccab792f102995142', title: text }, this.states.activeMoreMenu && (h("div", { key: 'bbe79e428f395a429586776c1cd53f3a4dafde72', class: "more-menu" }, h("slot", { key: '54bd0e016bce80d279d8e4214e8bf978e14f1c0a', name: "more-elements" }))), h("rtk-controlbar-button", { key: '242815c9b79d2f3c99f3289125756dbc2cff835f', size: this.size, iconPack: this.iconPack, onClick: (e) => {
                 e.stopPropagation();
                 this.toggleMoreMenu();
-            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: 'e2b04a67f5556cb41542ac8ca5c412f3a56db094', name: "expanded" })));
+            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: '7bd36f0994c7fd9ffe5591fd8b325ed521fbda6c', name: "expanded" })));
     }
     static get is() { return "rtk-more-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-mute-all-confirmation/rtk-mute-all-confirmation.js

@@ -29,7 +29,7 @@ export class RtkMuteAllConfirmation {
         };
     }
     render() {
-        return (h(Host, { key: '09ac6d366f7e831dc4c230a095362e3052d6b660' }, h("div", { key: 'b61c716f655d8498369a44fc428eaa66cc3ac3e4', class: "leave-modal" }, h("div", { key: 'fd29e553be01e54aca6103150eb93ee813165910', class: "header" }, h("h2", { key: '0f51a2bd668ee218fd24ed2c159bb9b3a242de69', class: "title" }, this.t('mute_all.header'))), h("p", { key: 'ad73531526726e07ecb12ce0cee079ec13eba45b', class: "message" }, this.t('mute_all.description')), h("div", { key: '0b1afc1be6bdcbbe938f381f0d03cd6dbb5fd78d', class: "content" }, h("div", { key: '7df30df11df3ac465be7d2efc5b8192788cb25f0', class: "leave-meeting" }, h("rtk-button", { key: 'f53cf09dd418a9df6d48d1bbb9b5a39effbdfd89', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: 'a459d494e2087c8794f4b0dd31b1544b59628916', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
+        return (h(Host, { key: 'cc42523605a89e127a34ffb366386c96e9e8bcc8' }, h("div", { key: '680059dc6adedc51406964516092716a4be9b0b8', class: "leave-modal" }, h("div", { key: 'c93fd02d2980e40ea05c2a72cde974c13313a5c6', class: "header" }, h("h2", { key: 'ed72b35943df3b6e277b072a283bc14df478334c', class: "title" }, this.t('mute_all.header'))), h("p", { key: '5e0fad3eaa18529f9ae576d0878b81bd8ecd86ec', class: "message" }, this.t('mute_all.description')), h("div", { key: '9d7de3d65427027e8ed91168a2d5005c4786fd03', class: "content" }, h("div", { key: 'aa6ec55ea8d2a57810c7270abeda998439339b0d', class: "leave-meeting" }, h("rtk-button", { key: '98e75f8a7d6f929a988cb79bd4ab0edd55032933', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '1e4738bcc21c4f9a09f833028f25b2a9255e718d', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
     }
     static get is() { return "rtk-mute-all-confirmation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-notification/rtk-notification.js

@@ -47,9 +47,9 @@ export class RtkNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '4d38d6d1cd77ba50b1d4d45b116e81d2766b9f1e' }, h("div", { key: '62c6d20c5636933df92cec162cd865f1a50350b7', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: 'd6d97ebb84af555140a1e10e7e7141cbb8a47395', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
+        return (h(Host, { key: 'd8f87edf560d58d8c50524a8d5d15b78372e2f0a' }, h("div", { key: '0d1590baa03f69ae6b7aeb8ecfb0227393e68296', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: '65f2e9ca0e53e0d5f41301346930f60983218bff', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
             this.notification.icon == null &&
-            this.imageState !== 'errored' && (h("img", { key: 'ab54904adcba0be957260f86bc782fd2e58fcdeb', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: '95b3ccba650df3098c7366c6c64ab58bde3bc128', class: "message" }, h(TextMessageView, { key: 'e958e9c20ab4646ebaf825bc2ba6875f86f459cf', message: this.notification.message })), h("div", { key: '9ae125712ac04f44ff92de8c5422b7644e65067a', class: "right" }, this.notification.button != null && (h("rtk-button", { key: '3da741b4ba6016743439d1e4fd7167d0a1681120', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: 'cb1c277c825dca4cd9eb185475dc617d9efde90e', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: '7b1b81d1aed31fab4ebb2b47d1adb512ceb9984f', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
+            this.imageState !== 'errored' && (h("img", { key: '728d4bc0a6ba7978a7bf922dab208b0a53cca149', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'f0908696b480de954e8d87f8588fb2d7caa05c9e', class: "message" }, h(TextMessageView, { key: '6727949c1a6100f04c58dfbceb32b65268dfbfd3', message: this.notification.message })), h("div", { key: '00f22a20100da8c6faa3d94b5cda8c37a201b953', class: "right" }, this.notification.button != null && (h("rtk-button", { key: 'd8e609d225ba6c8ff0aedad1efcaf84fd8f0183e', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '1fb7a3610c1197359f4c9f9e0a40ae67c2874447', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: 'a13f8cb2e31921910b29aa53df15741cd78b860e', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
     }
     static get is() { return "rtk-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-overlay-modal/rtk-overlay-modal.js

@@ -30,7 +30,7 @@ export class RtkOverlayModal {
         }
     }
     render() {
-        return (h(Host, { key: 'f5a1c1c5237881a419062ba14e2545bbd1281482' }, h("rtk-icon", { key: '39229b9afcb15d8bcb428bce4bb9e73862b5f9ea', icon: this.states.activeOverlayModal.icon }), h("h2", { key: '44a7256fef3163a3b058e1fb20f0081fc6dc5df9' }, this.states.activeOverlayModal.title), h("p", { key: '50416aebd7ee213bb4698d0b0095875e5556299d' }, this.states.activeOverlayModal.description)));
+        return (h(Host, { key: 'bfc7e1c1ff7734ac364d6394ce8805805e89f921' }, h("rtk-icon", { key: '8ea30e08a80472965f0ef64a09794aaaa5dbec3a', icon: this.states.activeOverlayModal.icon }), h("h2", { key: '1b774f87be43982f11a5324928929ddb17744b10' }, this.states.activeOverlayModal.title), h("p", { key: '1bdd97fda2d72590c55bbdb1434dd6fa08bb1362' }, this.states.activeOverlayModal.description)));
     }
     static get is() { return "rtk-overlay-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-participant-setup/rtk-participant-setup.js

@@ -83,11 +83,11 @@ export class RtkParticipantSetup {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '70cefbcd224011d31984bbccef75e7c389b39c53' }, h("video", { key: 'e86b57ba45fe602499522ad4d2ccdb0a9206f0b8', ref: (el) => (this.videoEl = el), class: {
+        return (h(Host, { key: '496e80e4d4c85229f6acc90d7caa46305c92e101' }, h("video", { key: 'b09d1e7ace8f7bb561997fcbddc41a7acbe91e51', ref: (el) => (this.videoEl = el), class: {
                 visible: (_a = this.videoState) === null || _a === void 0 ? void 0 : _a.videoEnabled,
                 mirror: this.isMirrored(),
                 [(_d = (_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.videoFit) !== null && _d !== void 0 ? _d : 'cover']: true,
-            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: 'a685f9e334d4fb351d69917212634ef04d560ce9' })));
+            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: 'da2678d7a8c226b23ffc6258fd90f3632efec30c' })));
     }
     static get is() { return "rtk-participant-setup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-participants-audio/rtk-participants-audio.js

@@ -126,7 +126,7 @@ export class RtkParticipantsAudio {
         await this.handleEvents(meeting);
     }
     render() {
-        return (h(Host, { key: 'a8475add44d320a002841f1a2dc5721b570640d6' }, this.showPlayDialog && (h("rtk-dialog", { key: 'ca12cb71cf7219ab280db551540f27ae20d06a03', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, h("div", { key: '55dfd687bcb08e7626b90fd8e746ce91278ca966', class: "modal" }, h("h3", { key: 'bcf35de807db566f3769f1537765ab04ced9ea3e' }, this.t('audio_playback.title')), h("p", { key: 'de10113d870ca2d7ea2673c6892e1ddae5276a86' }, this.t('audio_playback.description')), h("rtk-button", { key: '2197a6affa6ad0298cbd7c08fc3ecc43ac488cf6', kind: "wide", onClick: () => {
+        return (h(Host, { key: 'b4dc66ad5570492c73e3fc2d88f92c67de90c392' }, this.showPlayDialog && (h("rtk-dialog", { key: 'b0e893eee0ce675ba927f4bbb817ab7c0c4473f6', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, h("div", { key: 'a0f78ba76265d38a77dfbbe0bc680052f3d0393c', class: "modal" }, h("h3", { key: 'b150dc2862b2c626ecf27a5e78de86c98309ddee' }, this.t('audio_playback.title')), h("p", { key: 'f4a8eb77ba14a074eb105741240e3cb6765364bf' }, this.t('audio_playback.description')), h("rtk-button", { key: 'c6fc0f2d1e4d48f2d187fca780fafee841e69175', kind: "wide", onClick: () => {
                 this.audio.play();
                 this.onRtkDialogClose();
             }, title: this.t('audio_playback') }, this.t('audio_playback')))))));

package/dist/collection/components/rtk-participants-stage-list/rtk-participants-stage-list.js

@@ -105,7 +105,7 @@ export class RtkParticipants {
         }
     }
     render() {
-        return (h(Host, { key: 'ecc05db9075b4b8a70c3255c27958fc20bcf87cf' }, h("div", { key: '2bdf1aa213682d4ea175e10ccd2f87e437ace5c9', class: "participants-container" }, !this.hideHeader && (h("div", { key: '239593a2d551ab92d5cda3bcc3105d642b0c9c21', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '8ade637f0728fceb723370c8c7dd6e675eac0678', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
+        return (h(Host, { key: '82b79281405ea4012121471e245fd23b3b9c7bc6' }, h("div", { key: '231fbe8a811f49a92f6b16fb06e7246aebee7b77', class: "participants-container" }, !this.hideHeader && (h("div", { key: '0398c09c5c203bb6e581d3c016910542f36ba0d5', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '7e33ce03b36d42fd91f360e7bcd19d08d77a5ac0', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
     }
     static get is() { return "rtk-participants-stage-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-participants-stage-queue/rtk-participants-stage-queue.js

@@ -12,6 +12,12 @@ import { h } from "@stencil/core";
 import { defaultIconPack, createDefaultConfig, } from "../../exports";
 import { useLanguage } from "../../lib/lang";
 import { SyncWithStore } from "../../utils/sync-with-store";
+/**
+ * A component that displays participants waiting in the stage queue.
+ *
+ * Shows users who are waiting to be promoted to the stage in meetings
+ * with stage functionality enabled.
+ */
 export class RtkParticipantsStaged {
     constructor() {
         /** Config */

package/dist/collection/components/rtk-permissions-message/rtk-permissions-message.js

@@ -161,7 +161,7 @@ export class RtkPermissionsMessage {
             this.stepsTimer = setTimeout(this.nextStep, 2500);
         }
         const showMacDeepLink = isDeniedBySystem && this.meeting.self.device.osName == 'macOS';
-        return (h(Host, { key: '4039ee7e099db1e32b90619998663e1eec6b5636' }, h("h2", { key: '1508f630cd15cf10818a68862e559229ab6fa67c' }, h("rtk-icon", { key: '585e52aef1f40b78782ab28cf18fb1fcb84e2e52', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: '734e887eff67190ef6d69ebd5986e56f3f9f9622', class: 'svg-container' }, this.svgSteps.map((e, index) => (h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), h("div", { key: '98f2aab426b5f566e6550ba4d731a6d3ff7e0db2' }, this.getMessage()), !isDeniedBySystem && (h("a", { key: 'b6bb451aa68e871779404e734b6b7628214dc20c', class: "need-help-link", href: this.getLink((_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio'), target: "_blank", rel: "noreferrer external noreferrer noopener" }, h("rtk-icon", { key: 'd52a30a9e660fe79e401fcd18ef176616f33c8bc', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: 'bbf73dbe6c30b9ee7da51e4a73baf00d2c0c2536', class: "actions" }, h("rtk-button", { key: 'af07b342e5d0357827df64dfa576647faebe40c1', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), h("slot", { key: 'dd59fc9130e7e69563646681fa6f86efd292d5d6' })));
+        return (h(Host, { key: '35c2bbad4a60f6c782ba1a2a5605f0ea09790a49' }, h("h2", { key: '4df0f8e90e1423f28b87ffc3d959027be72bb3de' }, h("rtk-icon", { key: '566f697f6b9c27fc8f73e05506a80ead3791d9a9', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: 'd6872494a57e9afd5987b469a460c01f31f2ced4', class: 'svg-container' }, this.svgSteps.map((e, index) => (h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), h("div", { key: '4d59413ba86ec57f834f5989856866b6305c49de' }, this.getMessage()), !isDeniedBySystem && (h("a", { key: 'cf35ee0b4547aaae44bef3a6cd23d3aae77f3f33', class: "need-help-link", href: this.getLink((_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio'), target: "_blank", rel: "noreferrer external noreferrer noopener" }, h("rtk-icon", { key: '2f35807834494cfded1462c8619053c1d2591222', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: 'aedf537b4edc2ed14072d1f9d3b88c8794357b6e', class: "actions" }, h("rtk-button", { key: '5e603dffa66b44189da8ac80f49e2f5c209a38f8', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), h("slot", { key: 'd724d3c58d21d5e532a9fd025c3117cd235bd845' })));
     }
     static get is() { return "rtk-permissions-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-pip-toggle/rtk-pip-toggle.js

@@ -12,6 +12,12 @@ import { Host, h } from "@stencil/core";
 import { createDefaultConfig, defaultIconPack, } from "../../exports";
 import { useLanguage } from "../../lib/lang";
 import { SyncWithStore } from "../../utils/sync-with-store";
+/**
+ * A toggle button for enabling/disabling Picture-in-Picture mode.
+ *
+ * Allows users to switch the video display to a floating window that stays
+ * on top of other applications.
+ */
 export class RtkPipToggle {
     constructor() {
         /** Variant */

package/dist/collection/components/rtk-plugins/rtk-plugins.js

@@ -55,7 +55,7 @@ export class RtkPlugins {
         }
     }
     render() {
-        return (h(Host, { key: 'b8623c629040c0554f3f49631c8af224327e04d8' }, h("ul", { key: '25c5ba591bb4ab8c516b9b839bd801489e6b6780', class: "scrollbar" }, this.plugins.map((plugin) => (h("li", { key: plugin.name, class: "plugin" }, h("div", { class: "metadata" }, h("img", { src: plugin.picture }), h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
+        return (h(Host, { key: '14fa34c2c6d5ef9f1739b4b3a916ebf418b6f1e1' }, h("ul", { key: '705bf03c63c0848f80874277024ec91fad2ccfa1', class: "scrollbar" }, this.plugins.map((plugin) => (h("li", { key: plugin.name, class: "plugin" }, h("div", { class: "metadata" }, h("img", { src: plugin.picture }), h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
                 plugin.activate();
                 this.close();
             }, "aria-label": `${this.t('activate')} ${plugin.name}` }, h("rtk-icon", { icon: this.iconPack.rocket, tabIndex: -1, "aria-hidden": true })))), this.activatedPluginsId.includes(plugin.id) && this.canClosePlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {

package/dist/collection/components/rtk-poll/rtk-poll.js

@@ -36,7 +36,7 @@ export class RtkPolls {
     }
     render() {
         const hasVoted = this.poll.voted.includes(this.self);
-        return (h(Host, { key: 'f825c3370a59a54fc09a618f9902909c99c1897b' }, h("div", { key: '6f50f60ba0dd91522bad0354fa0d3f439e8673f4', class: "ctr" }, h("p", { key: '76188610303bc72ff364c5c6ce47dc0ab27cc5db', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: '4274bb5f2f45e4974d57ebe97e05bfafa06b680f', class: "poll" }, h("p", { key: '13abbdfb31636c3c884ac8890b5af55772b6db63', class: "poll-question" }, this.poll.question), h("div", { key: 'b656224c72f15911e797a902d70900a4f7c4e6f3', class: "poll-answers" }, h("span", { key: '8a4ce79b941317f2064325d35e3fa238ce674002' }, this.t('polls.answers')), h("span", { key: '5326355795e2b01397d00e6bf227854d8d0bb344' }, this.poll.voted.length)), this.poll.options.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '69e61c49e0f7f2015538447a8862bdb7fd3b4840' }, h("div", { key: '00dec58cb19f30a4fc01926dd383edb270cd61c3', class: "ctr" }, h("p", { key: '04d88ddf1f20e1a7e5b017f058b585723498f474', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: '5432167291df04bc4a4bfa23117df79c8512027d', class: "poll" }, h("p", { key: 'bee55a8193f96f582cf1c3006393740ab652dea7', class: "poll-question" }, this.poll.question), h("div", { key: 'aefe01131512e992e756196b5b451d4423bb9635', class: "poll-answers" }, h("span", { key: '973f566c9d84a6519f7ab307fd072215fe76f72d' }, this.t('polls.answers')), h("span", { key: '2a87b4bd72b99916cf20070c792742d04c1a44ca' }, this.poll.voted.length)), this.poll.options.map((item, index) => (h("div", { class: {
                 active: item.votes.some((x) => x.id === this.self),
                 'open-vote': this.permissions.polls.canVote && !hasVoted,
                 'poll-option': true,

package/dist/collection/components/rtk-poll-form/rtk-poll-form.js

@@ -65,10 +65,10 @@ export class RtkPoll {
         this.onCreate.emit(pollObject);
     }
     render() {
-        return (h(Host, { key: '5e4a500a4c7b96e628435f658a9442cee8754dba' }, h("div", { key: 'aafaec9249f0930c7595ed50849cec99dad8fa43', class: "create-poll" }, h("p", { key: '936655c0b3f39bb809a721e61feddf0cf4035d35' }, this.t('polls.question')), h("textarea", { key: '4c1d38f04b0e2a8c5479988866343fd16598e6bd', onInput: () => {
+        return (h(Host, { key: 'ff160dd70e52bfa8a0c5116acea73a16cb84b9b8' }, h("div", { key: '2f14946249e12cbc38db8cca86d370030286dc8e', class: "create-poll" }, h("p", { key: 'a6e3704c58e3526aa2e0f517f529c7ee48627f30' }, this.t('polls.question')), h("textarea", { key: '6b076d162f80cc4e08ecc9379e829f37d43d06bb', onInput: () => {
                 if (this.error && this.error.code === 0)
                     this.error = undefined;
-            }, ref: (e) => (this.question = e), placeholder: this.t('polls.question.placeholder') }), this.options.map((item, index) => (h("div", { class: "option" }, h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, h("rtk-icon", { icon: this.iconPack.subtract })))))), h("rtk-button", { key: '168d81435e110be82fb4999d2e1570b64b4dba58', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: 'f63479661285aa0e5b1d5493d1a07e5e72548f82' }, h("input", { key: '7a32324160cded505eebcaf8871221d932d6d3ba', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: 'b867ec10897e8e8a7b482350a09d9cf8025edb69' }, h("input", { key: 'ab9648514667805df67eb1f63cb803759ff3250f', id: "hideVotes", type: "checkbox", disabled: this.anonymous, checked: this.anonymous ? true : this.hideVotes, onChange: (e) => (this.hideVotes = e.target.checked) }), this.t('polls.results.hide')), h("rtk-button", { key: 'afbb0724017966cd5e1923baf0c1d21d26a6d9ec', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: '0247f46fbcaa64c5148f21a547fdc91da940b457', class: "error-text" }, this.error.message))));
+            }, ref: (e) => (this.question = e), placeholder: this.t('polls.question.placeholder') }), this.options.map((item, index) => (h("div", { class: "option" }, h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, h("rtk-icon", { icon: this.iconPack.subtract })))))), h("rtk-button", { key: 'be4055b21c6c810d0721fe2daf3308011b2c6d8f', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: '0e22f9da27289adf831d5a9458237aa11758fd41' }, h("input", { key: '577da1d275259a4e9ebffedf153f52e799172c42', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: 'c06bcbfb6d15125c614764002985d20713e672a4' }, h("input", { key: '9e9bb29126ed51c0bbd06481b44f690d737fbb64', id: "hideVotes", type: "checkbox", disabled: this.anonymous, checked: this.anonymous ? true : this.hideVotes, onChange: (e) => (this.hideVotes = e.target.checked) }), this.t('polls.results.hide')), h("rtk-button", { key: 'ab48323f46db1f6e485bea960f6d7ec6bb684075', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: '1d61b167ee24001d0b66acdb361262bf7f2ffcc6', class: "error-text" }, this.error.message))));
     }
     static get is() { return "rtk-poll-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-polls/rtk-polls.js

@@ -72,14 +72,14 @@ export class RtkPolls {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fef552b1147fd9e2c225afdf34b9aba0c0e2e4b5' }, h("div", { key: '87dd153ca64208a012de65778f43b1d855b73bac', class: "ctr", part: "container" }, h("div", { key: 'cb58918d2c1d4cac8be9d8cba04b2860dcd80cd7', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: 'e03792733786017f2ddb8f75d7852dc417491025', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
+        return (h(Host, { key: '0e868573a28a637e9df91a0c2e10bc1a73da2848' }, h("div", { key: '63cf282074f7c9eb248c4a645f6798001379907b', class: "ctr", part: "container" }, h("div", { key: '3237128bcbff4b513970e9832f26326a8be1cf56', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: '12b3c463d0f63f0a62ab33f17c0f18bb44fa0408', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
             var _a;
             return (h("rtk-poll", { key: item.id, poll: item, onRtkVotePoll: (e) => {
                     this.onVote(e.detail.id, e.detail.index);
                 }, self: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.userId, iconPack: this.iconPack, t: this.t, permissions: this.permissions }));
-        }), this.create && (h("rtk-poll-form", { key: 'b7489db77028a96177a6e8df6ba1bfc81893ff99', part: "poll-form", onRtkCreatePoll: (e) => {
+        }), this.create && (h("rtk-poll-form", { key: 'fb8b90bb86654aa8742ced745f88e5fbdc9282bf', part: "poll-form", onRtkCreatePoll: (e) => {
                 this.onCreate(e.detail);
-            }, iconPack: this.iconPack, t: this.t }))), ((_b = (_a = this.permissions) === null || _a === void 0 ? void 0 : _a.polls) === null || _b === void 0 ? void 0 : _b.canCreate) && (h("rtk-button", { key: '135391084ad419b455a173f2b6dcbea2a14725b5', kind: "wide", onClick: () => this.toggleCreateState(), variant: this.create ? 'secondary' : 'primary', part: "button" }, this.create ? this.t('polls.cancel') : this.t('polls.create'))))));
+            }, iconPack: this.iconPack, t: this.t }))), ((_b = (_a = this.permissions) === null || _a === void 0 ? void 0 : _a.polls) === null || _b === void 0 ? void 0 : _b.canCreate) && (h("rtk-button", { key: '7fffe35088db7620b4301145c6efa2f6da05153c', kind: "wide", onClick: () => this.toggleCreateState(), variant: this.create ? 'secondary' : 'primary', part: "button" }, this.create ? this.t('polls.cancel') : this.t('polls.create'))))));
     }
     static get is() { return "rtk-polls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-recording-indicator/rtk-recording-indicator.js

@@ -44,7 +44,7 @@ export class RtkRecordingIndicator {
         }
     }
     render() {
-        return (h(Host, { key: '440f9571742424afdd5a8a359d3dda3e606c11b2', "data-hidden": !this.isRecording }, this.isRecording && (h("div", { key: '0ce171e7f3f0ace231e2ddec4df84123834799b9', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: 'ad80d15b7c8790082ff77923fd4efefe85cbac02', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: '46325b55914de856f06be2465af456d1caa7ba6d' }, this.t('recording.label'))))));
+        return (h(Host, { key: 'c4246e4721b0ca5fbc689a90688f1239df60ecad', "data-hidden": !this.isRecording }, this.isRecording && (h("div", { key: 'ce19b3649bba8a91cd22770534762c932b934557', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: '9d2ae89fef0d4e1e0d3546f765f48be8a6da6b5a', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: 'cedf044a1a96c164022d734be2baf7e568fb849e' }, this.t('recording.label'))))));
     }
     static get is() { return "rtk-recording-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-screenshare-view/rtk-screenshare-view.js

@@ -106,7 +106,7 @@ export class RtkScreenshareView {
         const icon = this.isFullScreen
             ? this.iconPack.full_screen_minimize
             : this.iconPack.full_screen_maximize;
-        return (h(Host, { key: 'df55771dd36de2c1014e47c8d713b6d1d7ef08ad', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '83fe484dc37fce119266950f3584b8af79fcc14b', ref: (el) => (this.videoEl = el), class: {
+        return (h(Host, { key: '9ee4407d83a5b437f91813eedec6fd0836620a8c', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: 'bfbee68ee2700aba43d1aae85a8456c40dc55244', ref: (el) => (this.videoEl = el), class: {
                 visible: this.screenShareEnabled,
                 'fit-in-container': this.participant.supportsRemoteControl,
             }, playsInline: true, onPlay: () => {
@@ -114,15 +114,15 @@ export class RtkScreenshareView {
                     screenshareParticipant: this.participant,
                     participant: this.meeting.self,
                 });
-            }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '6b27dd39bea31267c5e3167aa3e5d922955c27cd', label: text }, h("rtk-button", { key: '2421ac7332eac3ff164412adcabfad0a0260a4af', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: '98480f5f702d93bdcfaa98afd317eccaa053a5d1', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '66d58882193ac51ee9527934a9203fd66d7d7c52' }, this.t('screenshare.shared')), h("div", { key: '023c29fddee876bccef4052c51197b759a6bab2e', class: "actions" }, this.meeting != null && (h("rtk-button", { key: 'c267d7178808f282c7c6d275c449bcaab934bc08', variant: "danger", onClick: () => {
+            }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && isFullScreenSupported() && (h("rtk-tooltip", { key: '25d8a59dae9afe875761f4ecaaae6d8f0c12792c', label: text }, h("rtk-button", { key: '9b294b9b0a987c8e54f6bca1ab3edc3e1a5238f9', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: 'd768caec415a0b75f42d39cfb15f3821264046da', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '7f4802409d87bb07dedac257e75f3e1d23ca4757' }, this.t('screenshare.shared')), h("div", { key: 'acd80c0b62e14b88c1a0c717814dcdc49c1c5a40', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '721fc83372b3a9752b06fbffa61072f88aa9e1b0', variant: "danger", onClick: () => {
                 this.meeting.self.disableScreenShare();
-            } }, h("rtk-icon", { key: 'bc63ef8e2f217a6b87e99d99e7e4098474d05b39', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '397f312bbd347f61566df2659c75f82de34b3808', variant: "secondary", id: "expand-btn", onClick: () => {
+            } }, h("rtk-icon", { key: '7aa2e4a597a1411e000209c6db95babf9c7f0366', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '4243b29230fc663db287f7db50dd4b5a8345a9bd', variant: "secondary", id: "expand-btn", onClick: () => {
                 this.videoExpanded = !this.videoExpanded;
-            } }, h("rtk-icon", { key: 'feaf388308067f245ec3ed422d2591db23001ba3', icon: this.videoExpanded
+            } }, h("rtk-icon", { key: '09c4a34f83662e5d1749e1dfd449d25da92c9976', icon: this.videoExpanded
                 ? this.iconPack.full_screen_minimize
                 : this.iconPack.full_screen_maximize, slot: "start" }), this.videoExpanded
             ? this.t('screenshare.min_preview')
-            : this.t('screenshare.max_preview'))))), h("slot", { key: '794b21a6d0df0eb104a56efd930e7e52ee1c5fcb' })));
+            : this.t('screenshare.max_preview'))))), h("slot", { key: 'a2046aecd50bc6fc0b8fb94a781bdd25c1d491ea' })));
     }
     static get is() { return "rtk-screenshare-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-settings-toggle/rtk-settings-toggle.js

@@ -37,7 +37,7 @@ export class RtkSettingsToggle {
     }
     render() {
         const text = this.t('settings');
-        return (h(Host, { key: '61f238a38d98cee571d84ea45c45a9bebd9cea51', title: text }, h("rtk-controlbar-button", { key: 'f1610cd64dd69d941b4d58eea5ec02b52e811bfe', part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.toggleSettings(), icon: this.iconPack.settings, label: text, variant: this.variant })));
+        return (h(Host, { key: '921afc41ed4a6019ff882c896855ab455b3edfb7', title: text }, h("rtk-controlbar-button", { key: '88d4194fee24f1b96769e06e3a935d516ad543b0', part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.toggleSettings(), icon: this.iconPack.settings, label: text, variant: this.variant })));
     }
     static get is() { return "rtk-settings-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-setup-screen/rtk-setup-screen.js

@@ -33,13 +33,26 @@ export class RtkSetupScreen {
         this.canProduceAudio = true;
         this.socketStateUpdate = ({ state }) => {
             this.connectionState = state;
+            if (state === 'connected') {
+                this.joinError = undefined;
+            }
             if (state === 'failed')
                 this.isJoining = false;
         };
         this.join = async () => {
             var _a, _b, _c;
             if (((_a = this.displayName) === null || _a === void 0 ? void 0 : _a.trim()) !== '' && !this.isJoining) {
+                if (this.connectionState !== 'connected') {
+                    if (this.connectionState) {
+                        this.joinError =
+                            this.connectionState === 'failed'
+                                ? this.t('network.lost_extended')
+                                : this.t('network.lost');
+                    }
+                    return;
+                }
                 this.isJoining = true;
+                this.joinError = undefined;
                 (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.setName(this.displayName);
                 gracefulStorage.setItem('rtk-display-name', this.displayName);
                 try {
@@ -47,6 +60,7 @@ export class RtkSetupScreen {
                 }
                 catch (e) {
                     this.isJoining = false;
+                    this.joinError = (e === null || e === void 0 ? void 0 : e.message) ? e.message : this.t('network.lost_extended');
                 }
             }
         };
@@ -75,6 +89,12 @@ export class RtkSetupScreen {
         if (!this.meeting) {
             return;
         }
+        const showSocketError = !!this.connectionState && this.connectionState !== 'connected' && !this.joinError;
+        const errorText = this.joinError
+            ? this.joinError
+            : this.connectionState === 'failed'
+                ? this.t('network.lost_extended')
+                : this.t('network.lost');
         const disabled = ((_a = this.displayName) === null || _a === void 0 ? void 0 : _a.trim()) === '' || this.connectionState !== 'connected' || this.isJoining;
         const defaults = {
             meeting: this.meeting,
@@ -93,9 +113,7 @@ export class RtkSetupScreen {
                 if (e.key === 'Enter') {
                     this.join();
                 }
-            } }))) : (h("div", { class: "uneditable-name" }, h("span", { class: "text" }, this.t('setup_screen.join_in_as'), " "), ' ', h("div", { class: "name" }, shorten(this.displayName, 20)))), h("rtk-button", { size: "lg", kind: "wide", onClick: this.join, disabled: disabled }, this.isJoining ? h("rtk-spinner", { iconPack: this.iconPack }) : this.t('join')), this.connectionState !== 'connected' && (h("div", { class: "no-network-badge" }, h("rtk-icon", { size: "md", variant: "danger", icon: this.iconPack.disconnected }), this.connectionState === 'failed'
-            ? this.t('network.lost_extended')
-            : this.t('network.lost')))))));
+            } }))) : (h("div", { class: "uneditable-name" }, h("span", { class: "text" }, this.t('setup_screen.join_in_as'), " "), ' ', h("div", { class: "name" }, shorten(this.displayName, 20)))), h("rtk-button", { size: "lg", kind: "wide", onClick: this.join, disabled: disabled }, this.isJoining ? h("rtk-spinner", { iconPack: this.iconPack }) : this.t('join')), (this.joinError || showSocketError) && (h("div", { class: "no-network-badge" }, h("rtk-icon", { size: "md", variant: "danger", icon: this.iconPack.disconnected }), errorText))))));
     }
     static get is() { return "rtk-setup-screen"; }
     static get encapsulation() { return "shadow"; }
@@ -260,6 +278,7 @@ export class RtkSetupScreen {
         return {
             "displayName": {},
             "isJoining": {},
+            "joinError": {},
             "canEditName": {},
             "canProduceAudio": {},
             "connectionState": {}

package/dist/collection/components/rtk-sidebar-ui/rtk-sidebar-ui.js

@@ -11,6 +11,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Host, h } from "@stencil/core";
 import { SyncWithStore } from "../../utils/sync-with-store";
 import { defaultIconPack, useLanguage } from "../../exports";
+/**
+ * A sidebar UI component with tabbed navigation.
+ *
+ * Provides a container for sidebar content with tab switching functionality.
+ * Can be displayed as a sidebar or in full-screen mode.
+ */
 export class RtkSidebarUi {
     constructor() {
         /** View */
@@ -62,11 +68,11 @@ export class RtkSidebarUi {
     render() {
         const isFullScreen = this.view === 'full-screen';
         const activeTab = this.tabs.find((tab) => tab.id === this.currentTab);
-        return (h(Host, { key: 'c82b2c0115417c6da59813f5dda1f306cf8ddba6', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: '3edc83cd51bc361031bc3a6ef6790c8f8158c696', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: 'd519be5840e46b9b0ca594fb7783f4432ee2df2a', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '097e785b39dd9fdc678e7029638faa7b897878b1', class: "main-header" }, h("h3", { key: 'bf75453843c0fe9ec2df142cfc08e9e1767768a6' }, activeTab.name), h("slot", { key: 'fadc034a7574c72cba40f1e1a365b044622b9ebb', name: "pinned-state" }))), isFullScreen && (h("header", { key: 'd75a18fc3bf34d462e036d0ffd235a3cdd59cc22', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
+        return (h(Host, { key: '239f279ceccceeaa57181d4a71f3e04ede4132ce', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: '921847fd946de305dce6f1fc7fe8a9ff175e38ee', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '1de9f1edf8ecce2d0390b7b8a1253de02affd9d1', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '4cd288feeb658e62d3ad1efd47aea237119918e1', class: "main-header" }, h("h3", { key: 'd6c4129537b4e090f3c429c66057be9a1072a864' }, activeTab.name), h("slot", { key: 'dfb1ea30cfa476b515a3a4b628c036083f1fe0a5', name: "pinned-state" }))), isFullScreen && (h("header", { key: '7dafb426628960ba26718530417854a533de3664', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
                 this.tabChange.emit(tab.id);
             }, class: {
                 active: this.currentTab === tab.id,
-            } }, tab.name))))), h("slot", { key: 'b11a84e677553f44e51b0f0b7209ddc769a8094e', name: this.currentTab })));
+            } }, tab.name))))), h("slot", { key: '2696ccd9fcad418ad7738164cd5a9e6305320899', name: this.currentTab })));
     }
     static get is() { return "rtk-sidebar-ui"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-spinner/rtk-spinner.js

@@ -22,7 +22,7 @@ export class RtkSpinner {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'f9f0f938827fb04712fb9f406fb07d48c398865a' }, h("rtk-icon", { key: 'a2daa23191ea94007c8a980f221409c6dfe35d03', class: "spinner", icon: this.iconPack.spinner })));
+        return (h(Host, { key: '5e435f3b94bf3a2b9d242d78407390996a76be15' }, h("rtk-icon", { key: '9e9e4200e0dc295bfe9048e57beb6cd809bf53a2', class: "spinner", icon: this.iconPack.spinner })));
     }
     static get is() { return "rtk-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-spotlight-grid/rtk-spotlight-grid.js

@@ -72,13 +72,13 @@ export class RtkSpotlightGrid {
             t: this.t,
         };
         const nonPinnedParticipants = this.participants.filter((p) => this.pinnedParticipants.some((pt) => pt.id != p.id));
-        return (h(Host, { key: 'ae7a59ab30389858e0e858e45715703b5ff70a64' }, h("main", { key: 'c654fa973b878dfedcbf50d4cd721ead7c934823', part: "main" }, h(Render, { key: '76977fe2c71d9f5bb6fc1db0ea3b0a1fec953342', element: "rtk-simple-grid", defaults: defaults, props: {
+        return (h(Host, { key: '1cb846cc92b660a8244d16a74f48dfadcef903b6' }, h("main", { key: '8564f8b0bf6e7bd668132e2833fe73c73855d090', part: "main" }, h(Render, { key: '61b96f305727dc74de15f4c3c645069d6300afd9', element: "rtk-simple-grid", defaults: defaults, props: {
                 part: 'main-grid',
                 participants: this.pinnedParticipants,
                 aspectRatio: this.aspectRatio,
                 gap: this.gap,
                 size: this.getAdaptiveSize(this.pinnedParticipants.length),
-            } })), nonPinnedParticipants.length > 0 && (h("aside", { key: 'c4472ba092926b8252309ccb705ab176c9f778d3', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, h(Render, { key: 'e7b636cc6dd46a7c4b9771070df8531d239fc0c0', element: "rtk-simple-grid", defaults: defaults, props: {
+            } })), nonPinnedParticipants.length > 0 && (h("aside", { key: '2e297a8d83c1f7241d8688b643c055331d69299b', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, h(Render, { key: '2c1969c610018dfb0a23308316f072e3b8d87a6e', element: "rtk-simple-grid", defaults: defaults, props: {
                 part: 'aside-grid',
                 participants: nonPinnedParticipants,
                 aspectRatio: this.aspectRatio,

package/dist/collection/components/rtk-stage/rtk-stage.js

@@ -26,7 +26,7 @@ export class RtkStage {
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '080bd127c4c95f790680c3c7a7fc3b017d338c63' }, h("slot", { key: '7de16a4fbc2940c4b5dd7a9f564ecc1792f7c0fc' })));
+        return (h(Host, { key: '681977138d7984d09fce875a7de3ccf763dbe3f7' }, h("slot", { key: '8412278c7a9491758d6cc0b96b262b616a8ba04f' })));
     }
     static get is() { return "rtk-stage"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-switch/rtk-switch.js

@@ -52,7 +52,7 @@ export class RtkSwitch {
         this.onChange.emit(checked);
     }
     render() {
-        return (h(Host, { key: 'eec1d068e605c536620cf04814474f1ce38fe6f6', role: "switch", tabIndex: this.disabled && 0, "aria-readonly": this.readonly, "aria-checked": this.checked, "aria-disabled": this.disabled, class: { checked: this.checked }, onClick: this.onClick, onKeyPress: this.onKeyPress }, h("div", { key: 'd60840f1537241f87ad269e84896700bac89e31d', class: "switch", part: "switch" })));
+        return (h(Host, { key: 'af0bcf0202cda77f3ec27510b867ed149c478bdf', role: "switch", tabIndex: this.disabled && 0, "aria-readonly": this.readonly, "aria-checked": this.checked, "aria-disabled": this.disabled, class: { checked: this.checked }, onClick: this.onClick, onKeyPress: this.onKeyPress }, h("div", { key: 'e6f5eeb8acf33e9f058b029423eddc099033053c', class: "switch", part: "switch" })));
     }
     static get is() { return "rtk-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-text-composer-view/rtk-text-composer-view.js

@@ -69,7 +69,7 @@ export class RtkTextComposerView {
         }
     }
     render() {
-        return (h("div", { key: '38a6c64bb92fd72f76109e0d55c04c00a77bb43a', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: 'b3d3ed9cd0694edf05cb7ccda50dc8f6157315ef', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: 'c5cd3e9887e90970729dc808413997bc17835ae6', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: 'fd2c53dc324defba567638782d2fafd66f9be11b', class: 'text-error breached' }, h("rtk-icon", { key: '7f60d2b74f45a7c4e4cbe422066803ff750fa5ef', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: 'd60bd094237e82a8a66e5afd6be464a242f43afa', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+        return (h("div", { key: '900c8fc082af9cffe94011fb0d682802cc450851', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (h("div", { key: 'fa2362fa593952c3680ae3408c8041c2567342dc', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, h("rtk-icon", { key: '0bfa55917acfbe23250bb2b3d487cf27c1eddc58', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (h("div", { key: 'b4dc7987ec892e6dd8746d21efddeb0a3b765a4c', class: 'text-error breached' }, h("rtk-icon", { key: 'e74b331f6674c5a5a7596d848c7b4846d28a4700', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), h("textarea", { key: '16dfc924b0d935a2e6b4d9fd22418331a9cd1044', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
     static get is() { return "rtk-text-composer-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-text-message/rtk-text-message.js

@@ -33,10 +33,10 @@ export class RtkTextMessage {
         this.showBubble = false;
     }
     render() {
-        return (h(Host, { key: '67e6670499ec4da0e5058fb5f8fd4a507e074319' }, !this.isContinued && (h(ChatHead, { key: 'ebb24560c3ff255a4269b5ba2063e254f8b6b47e', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '3d9a5abfd95cf388a405f368f72c68a63b178ac1', class: {
+        return (h(Host, { key: 'a34dd007a87a134202e153f3d886102bbe6a685c' }, !this.isContinued && (h(ChatHead, { key: '8505cee0d359b7449776ece2bbd7455811217a41', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '00b2baca454b62e4984e82790580bac116a046a0', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, h("div", { key: 'f2be9eaca8a82008d68bbdf077a2611227b474d5', class: { text: true, emoji: hasOnlyEmojis(this.message.message) } }, h(TextMessageView, { key: '1166f0aa5a25c5ad3559e1424d9d4f3ef3e76d63', message: this.message.message })))));
+            }, part: "body" }, h("div", { key: 'ecc8de946011c9836cebfd626a27cb23f111d0cc', class: { text: true, emoji: hasOnlyEmojis(this.message.message) } }, h(TextMessageView, { key: '1efad576e6110986cb2abac7ff2c42b492c995aa', message: this.message.message })))));
     }
     static get is() { return "rtk-text-message"; }
     static get properties() {

package/dist/collection/components/rtk-text-message-view/rtk-text-message-view.js

@@ -9,7 +9,7 @@ export class RtkTextMessageView {
         this.isMarkdown = false;
     }
     render() {
-        return (h("p", { key: '415dec939e8fa149f006a5c3afc4bafc11f911af', class: { text: true, emoji: hasOnlyEmojis(this.text) } }, this.isMarkdown ? h("rtk-markdown-view", { text: this.text }) : this.text));
+        return (h("p", { key: '45d7cc7d147e74609251f6ab3c2918d42ec6aaea', class: { text: true, emoji: hasOnlyEmojis(this.text) } }, this.isMarkdown ? h("rtk-markdown-view", { text: this.text }) : this.text));
     }
     static get is() { return "rtk-text-message-view"; }
     static get originalStyleUrls() {

package/dist/collection/components/rtk-transcript/rtk-transcript.js

@@ -40,7 +40,7 @@ export class RtkTranscript {
         }, 10000);
     }
     render() {
-        return (h(Host, { key: '1ef3069a15bd4ad0a8640e4caca8848827caae76' }, h("div", { key: 'f83ec302741a682c167759499a96827e860d4d10', class: "ctr" }, h("p", { key: 'e2f8c1217b7356c9ac1512d5b7829665811aec23', class: "message" }, h("span", { key: 'facedc310aadcbd93f2739e08eaa269c7ec11432', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
+        return (h(Host, { key: '0c5388d7f66dc55a13ccd85b83292bacfe4d1c7a' }, h("div", { key: '3b1684efa2f6b9e5653cec33572ffe41654460e9', class: "ctr" }, h("p", { key: 'b055b2371877d999c7ac60ff67f1c7ece9e4ec42', class: "message" }, h("span", { key: '283903c7e3cd282f6f377e93bd13faba265acdd8', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
     }
     static get is() { return "rtk-transcript"; }
     static get encapsulation() { return "shadow"; }