@cloudflare/realtimekit-ui 1.0.0-staging.8 → 1.0.0-staging.9

package/dist/cjs/rtk-avatar_54.cjs.entry.js

@@ -4863,7 +4863,7 @@ __decorate$9([
 ], RtkMuteAllConfirmation.prototype, "t", void 0);
 RtkMuteAllConfirmation.style = RtkMuteAllConfirmationStyle0;
 
-const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-3, 12px);max-width:var(--rtk-space-72, 288px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}rtk-icon.dismiss{margin-left:auto;height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px);border-radius:var(--rtk-border-radius-md, 8px);color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}rtk-icon.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}rtk-icon.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}rtk-button{margin-left:var(--rtk-space-4, 16px);margin-right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center}.right>*{margin-left:var(--rtk-space-2, 8px)}.right>*:first-child{margin-left:var(--rtk-space-0, 0px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
+const rtkNotificationCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{pointer-events:none;display:block;height:var(--rtk-space-10, 40px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));animation:show 0.4s ease;transition:0.4s;z-index:100}.ctr{box-sizing:border-box;display:inline-flex;height:100%;min-width:var(--rtk-space-40, 160px);align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-2, 8px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto}img{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);border-radius:9999px}img.loaded{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.message{margin-right:var(--rtk-space-3, 12px);max-width:var(--rtk-space-72, 288px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message p{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-1, 4px);display:inline-block}.message blockquote{display:none}rtk-icon.icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}button.dismiss{display:flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);align-items:center;justify-content:center;border-width:var(--rtk-border-width-none, 0);border-style:none;padding:var(--rtk-space-0, 0px);border-radius:var(--rtk-border-radius-sm, 4px);background-color:transparent;color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));outline-width:1px;outline-color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:hover{cursor:pointer;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}button.dismiss:focus-visible{outline-style:solid}button.dismiss{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.dismiss rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}rtk-button{border-radius:var(--rtk-border-radius-sm, 4px)}.right{margin-left:auto;display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateX(-120px)}100%{opacity:1;transform:translateX(0px)}}@keyframes exit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-120px)}}:host([size='sm']){font-size:14px}";
 const RtkNotificationStyle0 = rtkNotificationCss;
 
 var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -4889,20 +4889,29 @@ const RtkNotification = class {
     connectedCallback() {
         this.notificationChanged(this.notification);
     }
+    pausedChanged(paused) {
+        if (paused) {
+            clearTimeout(this.timeout);
+        }
+        else {
+            this.notificationChanged(this.notification);
+        }
+    }
     notificationChanged(notification) {
-        if (notification != null && typeof notification.duration === 'number') {
-            setTimeout(() => {
+        if (notification != null && typeof notification.duration === 'number' && !this.paused) {
+            this.timeout = window.setTimeout(() => {
                 this.dismiss.emit(notification.id);
             }, notification.duration);
         }
     }
     render() {
         var _a;
-        return (index$1.h(index$1.Host, { key: '97c09930a40443d2f0468ffc3623f197d04d3c62' }, index$1.h("div", { key: '099c921e90353f5965af50ef6019282d063692e9', class: "ctr" }, this.notification.icon != null && (index$1.h("rtk-icon", { key: '31502f1200bb0a7b8f059ee2916e79fc446cb73e', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
+        return (index$1.h(index$1.Host, { key: 'b6a7ede34064bcc25040589cd09b00a5e5a5cf8a' }, index$1.h("div", { key: '42608dc49ec59c0c54be513e59b81627f0ecb11c', class: "ctr" }, this.notification.icon != null && (index$1.h("rtk-icon", { key: '263c38129622549c8df1900d8905f52ee29cff8a', 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' && (index$1.h("img", { key: 'e2388975b8bea497a9d982037028bc7a269ab1fd', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), index$1.h("p", { key: '252ae9de49d3cc8faf23dee76d9add01fd1c1958', class: "message" }, index$1.h(TextMessage.TextMessageView, { key: '07b7dc12a9678647a331a0755a1faee6fddc7c31', message: this.notification.message })), index$1.h("div", { key: '8609f56cf258e8c6fb3eb2507d66da83e1e04267', class: "right" }, this.notification.button != null && (index$1.h("rtk-button", { key: 'b2a250ca6f0b7460f1dae4d35dab0aa7e57f6ecb', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), index$1.h("rtk-icon", { key: 'bbb1d1b15f3f58b6ed40a6339cf554e9870313d2', "aria-label": this.t('dismiss'), class: "dismiss", icon: this.iconPack.dismiss, onClick: () => this.dismiss.emit(this.notification.id) })))));
+            this.imageState !== 'errored' && (index$1.h("img", { key: '0e8d7812bd8b58ce0efe3edff6ae7346cbcd0fd4', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), index$1.h("p", { key: 'f28ec5ff1a3902817d5501ea2324371defc8995a', class: "message" }, index$1.h(TextMessage.TextMessageView, { key: '7f7b179a67d125585ed70112fcb2a1925c3bae52', message: this.notification.message })), index$1.h("div", { key: '2ba60b2b60ddbc43d207adc86e0a975f3c432f70', class: "right" }, this.notification.button != null && (index$1.h("rtk-button", { key: '2f4871b0ee2871cbccb016e4451e28c424fe14ce', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), index$1.h("button", { key: '1786dac10dbc2ca9aabad707354ce16fe1af9bc8', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, index$1.h("rtk-icon", { key: 'b11c47705af86c38bd6488ecb6998aad62099396', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
     }
     static get watchers() { return {
+        "paused": ["pausedChanged"],
         "notification": ["notificationChanged"]
     }; }
 };
@@ -5029,6 +5038,7 @@ const RtkNotifications = class {
                 });
             }
         };
+        this.paused = false;
     }
     connectedCallback() {
         if (typeof document !== 'undefined') {
@@ -5463,7 +5473,7 @@ const RtkNotifications = class {
             this.meeting.self.permissions.acceptWaitingRequests);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5e997428b873dd19471cec88927d4e0f86a74e6e' }, this.notifications.map((notification) => (index$1.h("rtk-notification", { size: this.size, key: notification.id, "data-id": notification.id, notification: notification, onRtkNotificationDismiss: (e) => this.handleDismiss(e), iconPack: this.iconPack, t: this.t })))));
+        return (index$1.h(index$1.Host, { key: '906188de5f85fcdb91e7bbd9fc44c60f722ec231' }, index$1.h("div", { key: '971924ad071ffa9525984eac3f11e929d10ec8a2', onMouseEnter: () => (this.paused = true), onFocusin: () => (this.paused = true), onMouseLeave: () => (this.paused = false), onFocusout: () => (this.paused = false) }, this.notifications.map((notification) => (index$1.h("rtk-notification", { size: this.size, key: notification.id, "data-id": notification.id, notification: notification, onRtkNotificationDismiss: (e) => this.handleDismiss(e), iconPack: this.iconPack, paused: this.paused, t: this.t }))))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -5519,7 +5529,7 @@ const RtkOverlayModal = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2c47006c013e278d9b65448f39e946458ba54158' }, index$1.h("rtk-icon", { key: 'daaa50fe0045a549f114d13c30059b79afaf4941', icon: this.states.activeOverlayModal.icon }), index$1.h("h2", { key: 'b75c58c750cad4dd10e80e7c1bb9ab2a6635cc64' }, this.states.activeOverlayModal.title), index$1.h("p", { key: '73f461f178f1924205cb9bed3e1605e358ce8c9f' }, this.states.activeOverlayModal.description)));
+        return (index$1.h(index$1.Host, { key: 'e5bdb94d07093b7b6950c5d389b3cca3c5f0bc22' }, index$1.h("rtk-icon", { key: '04dcace07d18e31644bb11215c069eb63ea8dfe6', icon: this.states.activeOverlayModal.icon }), index$1.h("h2", { key: '5ca79bee28c169a489a83e53e0911e6187c731f2' }, this.states.activeOverlayModal.title), index$1.h("p", { key: 'd4d7e34a08e991709b1931ce22c899dcc624c692' }, this.states.activeOverlayModal.description)));
     }
 };
 __decorate$6([
@@ -5988,7 +5998,7 @@ const RtkPermissionsMessage = class {
             this.stepsTimer = setTimeout(this.nextStep, 2500);
         }
         const showMacDeepLink = isDeniedBySystem && this.meeting.self.device.osName == 'macOS';
-        return (index$1.h(index$1.Host, { key: 'c147d4a660955e2dfc9983399c933b0c94167b8e' }, index$1.h("h2", { key: '83d6494dcfeb87d4a69e0017f0fc19d02fcd087e' }, index$1.h("rtk-icon", { key: 'b91b71bda9a11dcebcd278b9443050175772e436', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (index$1.h("div", { key: 'b2bcc6e71b71435679ae2b601e18d9fe3f15884c', class: 'svg-container' }, this.svgSteps.map((e, index) => (index$1.h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), index$1.h("div", { key: 'd6459cdc59b262d9aa64ab9327e3586efdc9cf54' }, this.getMessage()), !isDeniedBySystem && (index$1.h("a", { key: 'faa7f974bc971f124a89c566a9e1c1ea1ef1f32e', 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" }, index$1.h("rtk-icon", { key: 'befa0b687af79400e6f22c4f2078a703c2c43a7b', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), index$1.h("div", { key: '3cfcef69f2279d05451b290c0f3ef2dbbab5cfa7', class: "actions" }, index$1.h("rtk-button", { key: '5b95ec238665d0417f9c5ddb0b5ff6937adde080', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (index$1.h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (index$1.h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), index$1.h("slot", { key: 'a892cb955b1776bb54bb6e96d7e7234041d979a0' })));
+        return (index$1.h(index$1.Host, { key: '37bc20fd76370a473d701b99f141057e3ef7b9ea' }, index$1.h("h2", { key: '5177028bd1d1f909cc5dacffaf7a63e9a90a6119' }, index$1.h("rtk-icon", { key: 'eef420ebb45cedbd63f6f4532954a5175535c07e', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (index$1.h("div", { key: '1f35d79d6e3b83341a26081fc72540863d395108', class: 'svg-container' }, this.svgSteps.map((e, index) => (index$1.h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), index$1.h("div", { key: '855ceb1e53e3006b85d32e0edd9eb0088f94ad75' }, this.getMessage()), !isDeniedBySystem && (index$1.h("a", { key: 'c02d929f912ed50e47edaf853650e9569c700524', 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" }, index$1.h("rtk-icon", { key: '775423666928defb61670cd9a4c2e158fe6386e6', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), index$1.h("div", { key: '023b8da610c0afea0abb203ae9d09286b3368ccf', class: "actions" }, index$1.h("rtk-button", { key: 'a2b29cb77e0f32076dc8bf0a72e6b2f512684201', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (index$1.h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (index$1.h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), index$1.h("slot", { key: '2e7d6bcdb64f65de6e73742946a3a173905227a5' })));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]
@@ -6030,7 +6040,7 @@ const RtkSpinner = class {
         this.size = 'md';
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'bad95fde6d19c342301f03cede54d405fac62d61' }, index$1.h("rtk-icon", { key: '1dcdaaf95f9ada0f9966249a0246142180149ce4', class: "spinner", icon: this.iconPack.spinner })));
+        return (index$1.h(index$1.Host, { key: '40c9d7dd077b4ed5372afa510644528d392ff329' }, index$1.h("rtk-icon", { key: 'e74d17cc21859fc8581ad9e8735f65a98aa18300', class: "spinner", icon: this.iconPack.spinner })));
     }
 };
 __decorate$3([
@@ -6111,7 +6121,7 @@ const RtkTextComposerView = class {
         }
     }
     render() {
-        return (index$1.h("div", { key: 'a5c60716f87b3fe0c18849c889c33dc68e2cda5f', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: 'fdb5dfa266fe4535a5623eec26f16dced824fc03', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.h("rtk-icon", { key: '57839914af1e0ba02cf962d66e0a6421f7d841e8', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (index$1.h("div", { key: 'c0c869cae45b9b125034b7bb4f14bb8e843133a7', class: 'text-error breached' }, index$1.h("rtk-icon", { key: 'f6cd0c6cf8b2a4e9811c7c189543f03fdc5c5c22', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.h("textarea", { key: '78c0a228465c669fd3969f04e18c8e5f1e5cd342', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
+        return (index$1.h("div", { key: 'ce055f9e92b79c5ae63448220ea3f1e5adfb39c1', class: "chat-input", part: "chat-input-container" }, this.maxLengthBreached > 0 && (index$1.h("div", { key: 'd131418c66d521fb7b3012465f5774113ae902eb', class: 'text-error ' + (this.maxLengthBreached === this.maxLength ? 'breached' : '') }, index$1.h("rtk-icon", { key: '01c5f7756fb5a76cf3319122c9d808f2b0f6bbf8', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.maxLengthBreached, " / ", this.maxLength, " ", this.t('chat.max_limit_warning'))), this.rateLimitBreached && (index$1.h("div", { key: 'f96301c878d5b3b607fcd5de6d2131e647a3477a', class: 'text-error breached' }, index$1.h("rtk-icon", { key: '9b2ecdbac46b0e6ab09e91280c9ca473c719a5a9', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" }), ' ', this.t('chat.rate_limit_error'))), index$1.h("textarea", { key: 'fc08e05d8d917e72ec1218d0a2d2bc1db618c4cc', ref: (el) => (this.$textArea = el), placeholder: this.placeholder, disabled: this.disabled, onInput: this.onInputHandler, onKeyDown: this.keyDownHandler, part: "chat-input", value: this.value })));
     }
 };
 __decorate$2([
@@ -6147,10 +6157,10 @@ const RtkTextMessage = class {
         this.showBubble = false;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '2f3f5211b82e0ae80453d606bb962c3e1f1c5f4b' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: 'd41c973244580ef48141414c40eaff6a9429b33a', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: '3b4bf9ad47b959c79d9e70d3523b9ec46e6bdb8f', class: {
+        return (index$1.h(index$1.Host, { key: 'c21acb6c8645f4397b468f9f3bd687049503eb50' }, !this.isContinued && (index$1.h(ChatHead.ChatHead, { key: 'b7fa598be7d197a761bbb77617d4c9d8a255c48d', name: this.message.displayName, time: this.message.time, now: this.now })), index$1.h("div", { key: 'dc13b5f61ff5ecdece68abc33444d5a4e6852d92', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, index$1.h("div", { key: 'a3d9a56aa79c80d7f6c837a5ca32e574c0cf9c5a', class: { text: true, emoji: string.hasOnlyEmojis(this.message.message) } }, index$1.h(TextMessage.TextMessageView, { key: '69f15f8de5596d483ccb8724993c2274a46ed186', message: this.message.message })))));
+            }, part: "body" }, index$1.h("div", { key: 'a51406f8da3eda94b35b4ed878dffe4bd3f8d5a2', class: { text: true, emoji: string.hasOnlyEmojis(this.message.message) } }, index$1.h(TextMessage.TextMessageView, { key: '65b20790e134d5149c20815e47ab79c039afd437', message: this.message.message })))));
     }
 };
 __decorate$1([
@@ -6170,7 +6180,7 @@ const RtkTextMessageView = class {
         this.isMarkdown = false;
     }
     render() {
-        return (index$1.h("p", { key: '67b3aadecf02b8838821c13a3fbf926506dd3143', class: { text: true, emoji: string.hasOnlyEmojis(this.text) } }, this.isMarkdown ? index$1.h("rtk-markdown-view", { text: this.text }) : this.text));
+        return (index$1.h("p", { key: '43af19a40b404cf8de36db064a89e9eefd50af81', class: { text: true, emoji: string.hasOnlyEmojis(this.text) } }, this.isMarkdown ? index$1.h("rtk-markdown-view", { text: this.text }) : this.text));
     }
 };
 RtkTextMessageView.style = RtkTextMessageViewStyle0;

package/dist/cjs/rtk-camera-selector_2.cjs.entry.js

@@ -248,10 +248,10 @@ const RtkParticipantTile = class {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (index$1.h(index$1.Host, { key: 'd52e6943f39b48e4bbfab588d8cbbb65b345487f' }, index$1.h("video", { key: 'ab6f34d99cbfc482a2f4ab217fbcf94376fac8e3', ref: (el) => this.onVideoRef(el), class: {
+        return (index$1.h(index$1.Host, { key: '3e979a21a98a39b061612531ef9bd644d39a983e' }, index$1.h("video", { key: '3ba45f4944aafeb8673afc8daa1e15db82ec42b5', ref: (el) => this.onVideoRef(el), class: {
                 mirror: this.isMirrored(),
                 [(_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.videoFit) !== null && _c !== void 0 ? _c : 'cover']: true,
-            }, onPlaying: this.onPlaying, onPause: this.onPause, autoPlay: true, playsInline: true, muted: true, part: "video" }), this.isPinned && (index$1.h("rtk-icon", { key: 'ec66f88d6381c86e4014012bfba6ea9ba3a05309', class: "pinned-icon", icon: this.iconPack.pin, "aria-label": this.t('pinned'), part: "pinned-icon" })), this.mediaConnectionError && (index$1.h("div", { key: '07ab333220bc599319b32860f30735efa303c1cd', class: "network-container", part: "network-indicator" }, index$1.h("rtk-icon", { key: 'fcc1a2531916e35926bf3bec25a57f99e057d1f1', class: "network-icon", icon: this.iconPack.disconnected, "aria-label": this.t('pinned'), part: "pinned-icon" }))), index$1.h("slot", { key: 'c93ed3a0436b26e949bbbb030d88a87af4e31310' }, index$1.h(index$2.Render, { key: 'f0e56e1fe05063e2a37f421337ba08ea6dba2c9c', element: "rtk-participant-tile", defaults: defaults, childProps: {
+            }, onPlaying: this.onPlaying, onPause: this.onPause, autoPlay: true, playsInline: true, muted: true, part: "video" }), this.isPinned && (index$1.h("rtk-icon", { key: '02ca6b139670e6ac3ac16a24248329a4dc09976d', class: "pinned-icon", icon: this.iconPack.pin, "aria-label": this.t('pinned'), part: "pinned-icon" })), this.mediaConnectionError && (index$1.h("div", { key: '5bf2f0b14e7d077b3ebd9bec74291bf746fcf6c9', class: "network-container", part: "network-indicator" }, index$1.h("rtk-icon", { key: '32ee83f5d08430273ae0bce3424e2e1a3206419a', class: "network-icon", icon: this.iconPack.disconnected, "aria-label": this.t('pinned'), part: "pinned-icon" }))), index$1.h("slot", { key: '781a75e98ff649fb94672cb7ce4f176ef0c1c090' }, index$1.h(index$2.Render, { key: 'b756c2269429153fbab8dd3c79978d0a2d3a153d', element: "rtk-participant-tile", defaults: defaults, childProps: {
                 participant: this.participant,
             }, deepProps: true, onlyChildren: true }))));
     }

package/dist/cjs/rtk-participant-setup.cjs.entry.js

@@ -90,11 +90,11 @@ const RtkParticipantSetup = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index$1.h(index$1.Host, { key: 'ce131d63081a18dbb7078a6dd4904d6de8b43664' }, index$1.h("video", { key: '8e155c035aaeabc6f74a7ed9b2b0499a2957acc1', ref: (el) => (this.videoEl = el), class: {
+        return (index$1.h(index$1.Host, { key: '69573519e7127835dd9304dcfb507ebbb94e0de8' }, index$1.h("video", { key: '75c047e3029721e655016da9a40e2b94770a5234', 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 }), index$1.h("slot", { key: 'e54ce30dea8f970c2e8577eaddeec51aebbe5dcf' })));
+            }, autoPlay: true, playsInline: true, muted: true }), index$1.h("slot", { key: '3bdccee7fb4e001425249fe832b4bdcb01751306' })));
     }
     static get watchers() { return {
         "participant": ["participantsChanged"],

package/dist/cjs/rtk-participant_2.cjs.entry.js

@@ -401,12 +401,12 @@ const RtkVirtualizedParticipantList = class {
     render() {
         var _a;
         const totalHeight = this.items.length * this.itemHeight; // Total height of the list
-        return (index$1.h("div", { key: 'f46088e437f2da25f0599d9050d3b45f01a08323', class: "virtual-list-container", style: {
+        return (index$1.h("div", { key: '1a35b2155ffba410d278513dbdfeb7fd238443d8', class: "virtual-list-container", style: {
                 position: 'relative',
                 height: '100%',
                 overflowX: 'hidden',
                 overflowY: 'auto',
-            } }, index$1.h("div", { key: 'b980284407bddc11ba6b9a365eff13601b694732', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), index$1.h("div", { key: 'aca29d6c447481589c4928ad04ced0f2f926681b', style: { height: `${this.itemHeight}px` } })));
+            } }, index$1.h("div", { key: '90f445de9af8464c23dbd931f46600e015839d4f', style: { height: `${totalHeight}px`, position: 'relative' } }, !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) ? this.emptyListElement : this.renderItems()), index$1.h("div", { key: 'b7acc66cc75273c722b5a9c78949c67d785d5725', style: { height: `${this.itemHeight}px` } })));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/rtk-participants-audio.cjs.entry.js

@@ -184,7 +184,7 @@ const RtkParticipantsAudio = class {
         await this.handleEvents(meeting);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5c1ce4b10a43956964e2382e2434784617990be7' }, this.showPlayDialog && (index$1.h("rtk-dialog", { key: '572cd0cbb7e6919318ed412820cbe9bc0204178c', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, index$1.h("div", { key: '3c48ac9420996a4bfc68f80fc982609b7110c5b0', class: "modal" }, index$1.h("h3", { key: '20e87e695d0782d55a66401df6bbb6cebc8fe5c6' }, this.t('audio_playback.title')), index$1.h("p", { key: '26c2fa6e74d533c543a286559a5b5b8e0450b220' }, this.t('audio_playback.description')), index$1.h("rtk-button", { key: '7ac67b115d7ad2db95336c1a1d262ec3378c102d', kind: "wide", onClick: () => {
+        return (index$1.h(index$1.Host, { key: '8f6ac797ceb5f3fa6c8633e72174e9ae91e7979a' }, this.showPlayDialog && (index$1.h("rtk-dialog", { key: 'd1f5723dec7d7e9e66625deb9cebce63e26520e1', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, index$1.h("div", { key: 'cd0de80766e3f1c665666f463bf405f44ed8323d', class: "modal" }, index$1.h("h3", { key: '098d978b8c3aeba86328e23104fa7e73f12f2296' }, this.t('audio_playback.title')), index$1.h("p", { key: '74d242093687ab9734392a8d5357c7a2c5cce8b9' }, this.t('audio_playback.description')), index$1.h("rtk-button", { key: '6382f33f9b3907989c5559c49091f2173be708e3', kind: "wide", onClick: () => {
                 this.audio.play();
                 this.onRtkDialogClose();
             }, title: this.t('audio_playback') }, this.t('audio_playback')))))));

package/dist/cjs/rtk-participants-stage-list_4.cjs.entry.js

@@ -108,7 +108,7 @@ const RtkParticipants = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '022a9326d48692397a4b93a58b20b55942542f0d' }, index$1.h("div", { key: '292f4e26ddf2b65cecf3658d2d766734fa9fce86', class: "participants-container" }, !this.hideHeader && (index$1.h("div", { key: '6990d8f65de89a69ba0af146aa50790d132c676c', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), index$1.h("rtk-virtualized-participant-list", { key: '195b9d2ce76bba4ad934f4d776e003b3ab191fa3', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: index$1.h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
+        return (index$1.h(index$1.Host, { key: '54501f9cebd4dee4398cb0161341c72008a1bf22' }, index$1.h("div", { key: '9157670e4ed76beb38ad5c6e3405a1707ff8d262', class: "participants-container" }, !this.hideHeader && (index$1.h("div", { key: '71d44cb3842d749a19526068700f788727ff5c28', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), index$1.h("rtk-virtualized-participant-list", { key: '8239db7509da6cc5334b8d860e9954527febacf2', items: this.participants, renderItem: this.createParticipantNode, part: "participants", class: "participants", emptyListElement: index$1.h("div", { class: "empty-stage-list" }, this.search.length > 0 ? this.t('search.could_not_find') : this.t('search.empty')) }))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"],

package/dist/cjs/rtk-plugins_2.cjs.entry.js

@@ -60,7 +60,7 @@ const RtkPlugins = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'a4ef27530f9e18bc63f0c419219eb4ad0314a213' }, index$1.h("ul", { key: '348783b9aa3feb3a215a73a1f7fc1bb749c17da0', class: "scrollbar" }, this.plugins.map((plugin) => (index$1.h("li", { key: plugin.name, class: "plugin" }, index$1.h("div", { class: "metadata" }, index$1.h("img", { src: plugin.picture }), index$1.h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (index$1.h("div", { class: "buttons" }, index$1.h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
+        return (index$1.h(index$1.Host, { key: '74f2d9af55a0670b4ae5406f73b333187e8c3d92' }, index$1.h("ul", { key: '955e4e2a9d101b5027ef725175996c8e72a94b30', class: "scrollbar" }, this.plugins.map((plugin) => (index$1.h("li", { key: plugin.name, class: "plugin" }, index$1.h("div", { class: "metadata" }, index$1.h("img", { src: plugin.picture }), index$1.h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (index$1.h("div", { class: "buttons" }, index$1.h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
                 plugin.activate();
                 this.close();
             }, "aria-label": `${this.t('activate')} ${plugin.name}` }, index$1.h("rtk-icon", { icon: this.iconPack.rocket, tabIndex: -1, "aria-hidden": true })))), this.activatedPluginsId.includes(plugin.id) && this.canClosePlugins && (index$1.h("div", { class: "buttons" }, index$1.h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
@@ -150,14 +150,14 @@ const RtkPolls = class {
         scroll.smoothScrollToBottom(this.pollEl);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '90670e63e9732cdaf7fb40b8fc5c83d23169ffc2' }, index$1.h("div", { key: 'e1b10652531d40deef0753eba00f5e42a6ace030', class: "ctr", part: "container" }, index$1.h("div", { key: 'ff8549851c499d5e52c7ea44ff02542a9216463b', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (index$1.h("div", { key: 'cd06ef857955de65e4aaa60ee1b5419c379e1a9c', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
+        return (index$1.h(index$1.Host, { key: 'aac0c84486146fa17436746fb6def9cc4e539a2c' }, index$1.h("div", { key: '179c4496372623a2ea2f7c0b555b84ea1cae12ee', class: "ctr", part: "container" }, index$1.h("div", { key: '07b09fc28d75b1d40dec83eecae3661dfca1dbd2', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (index$1.h("div", { key: '841f91b0da755e48498c520a8234cf6b926b058c', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
             var _a;
             return (index$1.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 && (index$1.h("rtk-poll-form", { key: '41f8908f7485faf89738cea1f2ccb816fb6c094f', part: "poll-form", onRtkCreatePoll: (e) => {
+        }), this.create && (index$1.h("rtk-poll-form", { key: 'c6545dffc24f5409417666404ab73bf546834a8b', part: "poll-form", onRtkCreatePoll: (e) => {
                 this.onCreate(e.detail);
-            }, iconPack: this.iconPack, t: this.t }))), this.permissions.polls.canCreate && (index$1.h("rtk-button", { key: 'd2b90f8c13da232af950d2653c1322f334df8181', 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 }))), this.permissions.polls.canCreate && (index$1.h("rtk-button", { key: '69651546ee9a00f9b9c467e0f2307f5ce2dc1383', kind: "wide", onClick: () => this.toggleCreateState(), variant: this.create ? 'secondary' : 'primary', part: "button" }, this.create ? this.t('polls.cancel') : this.t('polls.create'))))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]

package/dist/cjs/rtk-poll_2.cjs.entry.js

@@ -40,7 +40,7 @@ const RtkPolls = class {
     }
     render() {
         const hasVoted = this.poll.voted.includes(this.self);
-        return (index$1.h(index$1.Host, { key: 'd37f42807d5e9ff32cd1a675d917a15ef38c1a50' }, index$1.h("div", { key: '2defb5e6817c6e52ef9d174e9139106d9f971304', class: "ctr" }, index$1.h("p", { key: '1f62d9493e4412fb8120dd6a1cdac8102d4bfd3f', class: "poll-title" }, this.t('polls.by'), " ", string.shorten(string.formatName(this.poll.createdBy), 20)), index$1.h("div", { key: '75315b70802cd4040f3a9feafe424f329fd2b397', class: "poll" }, index$1.h("p", { key: '562f274b9c9a37c181491ec2a10bc60dfb9b2f2e', class: "poll-question" }, this.poll.question), index$1.h("div", { key: 'b683a6f2d4f019f2abc0ede2db00559ee251601d', class: "poll-answers" }, index$1.h("span", { key: '8470f3dfc7e3ae98af53264e395678bf4a1df7af' }, this.t('polls.answers')), index$1.h("span", { key: '2a8bbbb9b06b5ae990b6076028c1305f7c8551b8' }, this.poll.voted.length)), this.poll.options.map((item, index) => (index$1.h("div", { class: {
+        return (index$1.h(index$1.Host, { key: '3436a978185495090fcf81a59f40e3d0f9bac969' }, index$1.h("div", { key: '1349450369add7268b290b2b75ca07aa28820683', class: "ctr" }, index$1.h("p", { key: 'f36ddcb1f30368e5b311fe7f11cca87785c9570c', class: "poll-title" }, this.t('polls.by'), " ", string.shorten(string.formatName(this.poll.createdBy), 20)), index$1.h("div", { key: '6c5ac869b1c182d09d9e1490a312797c913d24b1', class: "poll" }, index$1.h("p", { key: '1c3ca8f47cf9a08f3ac7ef47e144330b922534fc', class: "poll-question" }, this.poll.question), index$1.h("div", { key: 'e5e60be4359714828d1d25bb24f5f143a1c6428f', class: "poll-answers" }, index$1.h("span", { key: '60eeb63b59d1f3d8c44a1cbd53c42e82877f22d1' }, this.t('polls.answers')), index$1.h("span", { key: '6c6a42a4e6b84ec18ad94bcd4015ed4047b7b0aa' }, this.poll.voted.length)), this.poll.options.map((item, index) => (index$1.h("div", { class: {
                 active: item.votes.some((x) => x.id === this.self),
                 'open-vote': this.permissions.polls.canVote && !hasVoted,
                 'poll-option': true,
@@ -124,10 +124,10 @@ const RtkPoll = class {
         this.onCreate.emit(pollObject);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ce91372243197e68b2323889fe6768afcb13712d' }, index$1.h("div", { key: 'd7e688b9e924ed8677eea21f7ba7fde844d8127a', class: "create-poll" }, index$1.h("p", { key: 'c240dde8fc2e10b092990a24a4c48205927f6661' }, this.t('polls.question')), index$1.h("textarea", { key: '52f17471f4e00db0f72aeaf5637b0d282170c905', onInput: () => {
+        return (index$1.h(index$1.Host, { key: 'a5d66ad4586b3e3bf360fc7f3330cbebfcc27d29' }, index$1.h("div", { key: 'ab293118b0a4e4f0839da8b1f28e8bb4c3075e00', class: "create-poll" }, index$1.h("p", { key: 'dd851c73436db148c85fa4ae605841acc4047114' }, this.t('polls.question')), index$1.h("textarea", { key: 'f2fc86324169b0eb23eccbf6f9a9425b2fa43cef', 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) => (index$1.h("div", { class: "option" }, index$1.h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (index$1.h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, index$1.h("rtk-icon", { icon: this.iconPack.subtract })))))), index$1.h("rtk-button", { key: '18b094e5ed57c3fc67719820c21e04ce5a322bf7', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), index$1.h("label", { key: '7466c849dbd7146fbc2e919ca240cf5b4ca87948' }, index$1.h("input", { key: '3523addb0bef26dd203ff0ace9cbc5c8e438a4dc', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), index$1.h("label", { key: '0948aeedab995e2807f65da59db206620e559677' }, index$1.h("input", { key: '24c695b457b095f11ab25f2866dfdbad7e3445f3', 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')), index$1.h("rtk-button", { key: 'ed358c58d852a658d5a32681ac948b3bcdc06935', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && index$1.h("span", { key: 'ff82ffba979eef3ed1e4c234e8a0656fa454d2c9', class: "error-text" }, this.error.message))));
+            }, ref: (e) => (this.question = e), placeholder: this.t('polls.question.placeholder') }), this.options.map((item, index) => (index$1.h("div", { class: "option" }, index$1.h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (index$1.h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, index$1.h("rtk-icon", { icon: this.iconPack.subtract })))))), index$1.h("rtk-button", { key: 'd33f567bcd74edf4ace17cd3a0ca36daf69eeb8c', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), index$1.h("label", { key: '1ded9b5aeec6b5b5fec3cc2ec43c488b48a0568b' }, index$1.h("input", { key: '37047cb8a6ccb8c37fc56261fb2f32fa0ff19d92', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), index$1.h("label", { key: '50ac11b8af600d337cc2a1d8ec934e1abac7eaf6' }, index$1.h("input", { key: '6d3df46887a4285d923cc2f8b82abf396a2df8fa', 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')), index$1.h("rtk-button", { key: '36f2228ca82a29f9d72f768fa65028690230a26f', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && index$1.h("span", { key: 'fe7a37df641bcf672e8c85a87251df19d8d1fc91', class: "error-text" }, this.error.message))));
     }
 };
 __decorate([

package/dist/cjs/rtk-recording-indicator.cjs.entry.js

@@ -47,7 +47,7 @@ const RtkRecordingIndicator = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'b76ca6a6d3dea0df7318e8882055dcd04dbd7a46', "data-hidden": !this.isRecording }, this.isRecording && (index$1.h("div", { key: '32d34242dbeb17c11067f51c5fbf0b1ebd7ef541', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, index$1.h("rtk-icon", { key: 'fb7851e4bb57e4193afc05edbfe9b24122a5b743', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), index$1.h("span", { key: 'de677e81dc576b9188b896ecbb458a62b5bd74dc' }, this.t('recording.label'))))));
+        return (index$1.h(index$1.Host, { key: '3919ce20c5524d477536f62b9dd5abe8c1d49c37', "data-hidden": !this.isRecording }, this.isRecording && (index$1.h("div", { key: 'c482fdc00ff90f8ae2841f8d469f3b54704b6615', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, index$1.h("rtk-icon", { key: '75663e533fe47c5ad2e5d55db5d8a027fc12220c', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), index$1.h("span", { key: '99d4cc0c9ce7388808b643b0bcce27883d2b4643' }, this.t('recording.label'))))));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]

package/dist/cjs/rtk-screenshare-view.cjs.entry.js

@@ -109,7 +109,7 @@ const RtkScreenshareView = class {
         const icon = this.isFullScreen
             ? this.iconPack.full_screen_minimize
             : this.iconPack.full_screen_maximize;
-        return (index$1.h(index$1.Host, { key: '60edea950d73ace6447569fd3862c48925d24339', class: { isSelf } }, index$1.h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, index$1.h("video", { key: '2c1ba4c2c053ded45060f453e47864662e6b49e1', ref: (el) => (this.videoEl = el), class: {
+        return (index$1.h(index$1.Host, { key: 'c5fe06d9c1bfd2856b2eb93bb55b7c636256052f', class: { isSelf } }, index$1.h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, index$1.h("video", { key: '5bdd1b7bd0e28ecb4b551b30f6e623c7a1ece49a', ref: (el) => (this.videoEl = el), class: {
                 visible: this.screenShareEnabled,
                 'fit-in-container': this.participant.supportsRemoteControl,
             }, playsInline: true, onPlay: () => {
@@ -117,15 +117,15 @@ const RtkScreenshareView = class {
                     screenshareParticipant: this.participant,
                     participant: this.meeting.self,
                 });
-            }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), index$1.h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && fullScreen.isFullScreenSupported() && (index$1.h("rtk-tooltip", { key: 'b5264cba99a0840d6be7841b68c633df3042e5bb', label: text }, index$1.h("rtk-button", { key: '93711a3eb4b848df8fbe16e1be1e661109908e66', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, index$1.h("rtk-icon", { key: 'b9c73ac5b6b247969b69c21dbc368372e0cdace4', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (index$1.h("div", { id: "self-message", key: "self-message" }, index$1.h("h3", { key: 'c9878c8a0eaa4c25e18855a56357115fc19acf09' }, this.t('screenshare.shared')), index$1.h("div", { key: '1aacb8a470ec255facc44d666cc9565364f44809', class: "actions" }, this.meeting != null && (index$1.h("rtk-button", { key: '324558ed4a0115586aea78d69ecb94793ad7f731', variant: "danger", onClick: () => {
+            }, autoPlay: true, muted: true, id: `screen-share-video-${this.participant.id}` })), index$1.h("div", { id: "controls", key: "controls" }, !this.hideFullScreenButton && !isSelf && fullScreen.isFullScreenSupported() && (index$1.h("rtk-tooltip", { key: 'fdfd7c6b5468ef96bdb06d4f942a3e10cbee08cb', label: text }, index$1.h("rtk-button", { key: '99e0138257f6e0ec55ceee7f20318d78887f812b', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, index$1.h("rtk-icon", { key: '06e747a6af4a5b79445ffb63598afd2ac515d3a2', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (index$1.h("div", { id: "self-message", key: "self-message" }, index$1.h("h3", { key: '1ad96435977e90e6f0eff64a54507d106a4091be' }, this.t('screenshare.shared')), index$1.h("div", { key: '02f1e2a734d3f56157ab76c1de55517995d8f98d', class: "actions" }, this.meeting != null && (index$1.h("rtk-button", { key: '4bc8344f8a829ff1a12552d9002d83032ec7277f', variant: "danger", onClick: () => {
                 this.meeting.self.disableScreenShare();
-            } }, index$1.h("rtk-icon", { key: 'c21f7fe06c0ddfbd6558f6facfc10a3777974618', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), index$1.h("rtk-button", { key: '1747d034e775efe0f6f483afd22b3635c8db12b6', variant: "secondary", id: "expand-btn", onClick: () => {
+            } }, index$1.h("rtk-icon", { key: 'c2412bb995c605f980859481200033a447147b91', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), index$1.h("rtk-button", { key: '0d513e8b6efa96b542d6bd163db81a179073ed45', variant: "secondary", id: "expand-btn", onClick: () => {
                 this.videoExpanded = !this.videoExpanded;
-            } }, index$1.h("rtk-icon", { key: 'e4edd0c3b9158eeabe313520f4214716668d4015', icon: this.videoExpanded
+            } }, index$1.h("rtk-icon", { key: 'bec9074447f55461239fc4c7c20b811dfe7db8bb', 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'))))), index$1.h("slot", { key: 'a115d046871670b009dbb8be22f9fad93fafea6a' })));
+            : this.t('screenshare.max_preview'))))), index$1.h("slot", { key: '2858a3123887f964d6e8ea77fb871abddc4c6295' })));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/rtk-settings-toggle.cjs.entry.js

@@ -37,7 +37,7 @@ const RtkSettingsToggle = class {
     }
     render() {
         const text = this.t('settings');
-        return (index$1.h(index$1.Host, { key: 'e94a22b4a0fea761f050247af7af496627353d07', title: text }, index$1.h("rtk-controlbar-button", { key: '62d3e20bf3ea31f4d05e323d56b699e6095b2742', part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.toggleSettings(), icon: this.iconPack.settings, label: text, variant: this.variant })));
+        return (index$1.h(index$1.Host, { key: '11653f887305c7ba74c0e62197b0b8502f64bb22', title: text }, index$1.h("rtk-controlbar-button", { key: '4e4985182d0c63d2f9f8f2fc8173f2cd10edf91d', part: "controlbar-button", size: this.size, iconPack: this.iconPack, onClick: () => this.toggleSettings(), icon: this.iconPack.settings, label: text, variant: this.variant })));
     }
 };
 __decorate([

package/dist/cjs/rtk-setup-screen.cjs.entry.js

@@ -84,7 +84,7 @@ const RtkSetupScreen = class {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (index$1.h(index$1.Host, { key: '381d4439ff09cec4bded24f3aaf133300d22eee6' }, index$1.h("div", { key: '6eb5aba251ccceace8ae1a002119b18e19101d5f', class: "container" }, index$1.h("div", { key: 'b28744700f5e375fd76cc541e881a693fcae1db8', class: 'container-tile' }, index$1.h(index$2.Render, { key: 'cf1b19261f5f93b31478ae78777c2738f6e772dd', element: "rtk-participant-tile", defaults: defaults, props: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md', isPreview: true }, childProps: { participant: (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self, size: 'md' }, deepProps: true }), index$1.h("div", { key: '535be5e0cd9dd54bc9a8eaeafeb1ff400002a40c', class: 'media-selectors' }, index$1.h("rtk-microphone-selector", Object.assign({ key: '4372044b3190a1b6b870f18f582c3482e51247da' }, defaults, { variant: "inline" })), index$1.h("rtk-camera-selector", Object.assign({ key: '05b524a826d6f08e824ae7d4322964e08e7d5b17' }, defaults, { variant: "inline" })), index$1.h("rtk-speaker-selector", Object.assign({ key: 'ea1994e0688d368011892c093266d6d5e44f667a' }, defaults, { variant: "inline" })))), index$1.h("div", { key: 'e519f17b8b0f0e62d43c68c0a60b11cc67b15f0f', class: "metadata" }, index$1.h("div", { key: 'c5623e21796952587613edd9a7044409cb02cb4f', class: "name" }, this.t('setup_screen.join_in_as')), index$1.h("div", { key: '1331bc562722616956fa81f727e092a3e0a362e2', class: "label" }, index$1.h("div", { key: 'ef01a68f30113400a4fb53e6764748fa674e80b9', class: "name" }, !this.canEditName && string.shorten(this.displayName, 20))), this.canEditName && (index$1.h("input", { key: 'd101488e167a8bbecf9e8e316314faccc4617f20', placeholder: this.t('setup_screen.your_name'), value: this.displayName, spellcheck: false, autoFocus: true, ref: (el) => {
+        return (index$1.h(index$1.Host, { key: '4d337a1e3a71a0651fa082a149298129dd7b984a' }, index$1.h("div", { key: '24fda5fbca3b4dd0092031d54b90632a20ecc287', class: "container" }, index$1.h("div", { key: 'c1d947c44ba11b69f9679c03cd7423581e427a04', class: 'container-tile' }, index$1.h(index$2.Render, { key: '5fe4a9507ed599f08f808f0cf295c1504ac43799', element: "rtk-participant-tile", defaults: defaults, props: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md', isPreview: true }, childProps: { participant: (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self, size: 'md' }, deepProps: true }), index$1.h("div", { key: 'f0b35c6d5354c3416e72132d53bdda9fd770505b', class: 'media-selectors' }, index$1.h("rtk-microphone-selector", Object.assign({ key: 'daec71962a0d368e91fa7d410c09be0321d6e7e1' }, defaults, { variant: "inline" })), index$1.h("rtk-camera-selector", Object.assign({ key: 'b61f2afe68d92c48a199bcb22e1df124c392c22d' }, defaults, { variant: "inline" })), index$1.h("rtk-speaker-selector", Object.assign({ key: '8368f850725151e63ff390a2a721164e8923a762' }, defaults, { variant: "inline" })))), index$1.h("div", { key: 'd29f5f5e680e4614cf5ee378a1533c0e1235cf7c', class: "metadata" }, index$1.h("div", { key: 'c0b7e8ef018d34f447775f55e8244927314d70c3', class: "name" }, this.t('setup_screen.join_in_as')), index$1.h("div", { key: 'a45332643ef73dd286e48d2ba9b6bddd9625ab60', class: "label" }, index$1.h("div", { key: '71633d8d8987bafaa054edace2a18a9960d45f48', class: "name" }, !this.canEditName && string.shorten(this.displayName, 20))), this.canEditName && (index$1.h("input", { key: 'b7609fa43a59a637c14f32c7ad7cde8f67b04bc2', placeholder: this.t('setup_screen.your_name'), value: this.displayName, spellcheck: false, autoFocus: true, ref: (el) => {
                 this.inputEl = el;
             }, onInput: (e) => {
                 this.displayName = e.target.value;
@@ -92,7 +92,7 @@ const RtkSetupScreen = class {
                 if (e.key === 'Enter') {
                     this.join();
                 }
-            } })), index$1.h("rtk-button", { key: 'b80a3f917453ed29dec1b6b406065f96a7030aa0', size: "lg", kind: "wide", onClick: this.join, disabled: disabled }, this.isJoining ? index$1.h("rtk-spinner", { iconPack: this.iconPack }) : this.t('join')), this.connectionState !== 'connected' && (index$1.h("div", { key: '0ca7a9fb334f82d3f59720bd37246749ce62e86a', class: "no-network-badge" }, index$1.h("rtk-icon", { key: 'd43d5507a164ac734dddb6496cd2910aa81deb98', size: "md", variant: "danger", icon: this.iconPack.disconnected }), this.connectionState === 'failed'
+            } })), index$1.h("rtk-button", { key: '16599f17361ab91cee7af782e18ac55a75de2f95', size: "lg", kind: "wide", onClick: this.join, disabled: disabled }, this.isJoining ? index$1.h("rtk-spinner", { iconPack: this.iconPack }) : this.t('join')), this.connectionState !== 'connected' && (index$1.h("div", { key: 'ce111c7cbcd7ce227bd5eda1d9498621f5de0286', class: "no-network-badge" }, index$1.h("rtk-icon", { key: '3de05287a1657febc620285394299557042e5218', size: "md", variant: "danger", icon: this.iconPack.disconnected }), this.connectionState === 'failed'
             ? this.t('network.lost_extended')
             : this.t('network.lost')))))));
     }

package/dist/cjs/rtk-simple-grid.cjs.entry.js

@@ -76,7 +76,7 @@ const RtkSimpleGrid = class {
             aspectRatio: this.aspectRatio,
             gap: this.gap,
         });
-        return (index$1.h(index$1.Host, { key: '954285505c59c26020a13412683395dd80bfd0b9' }, index$1.h("slot", { key: '5843e6f185d9e10a0e74b8f8e234b0e82e78c9fd' }, this.participants.map((participant, index) => {
+        return (index$1.h(index$1.Host, { key: '66b303c15b37e03ca647f8633c72f664f1e7256f' }, index$1.h("slot", { key: '14f45cb35f76b6456561df790ca4be4ff415f1e7' }, this.participants.map((participant, index) => {
             const { top, left } = getPosition(index);
             return (index$1.h(index$2.Render, { element: "rtk-participant-tile", defaults: defaults, props: {
                     participant,

package/dist/cjs/rtk-spotlight-grid.cjs.entry.js

@@ -71,13 +71,13 @@ const RtkSpotlightGrid = class {
             t: this.t,
         };
         const nonPinnedParticipants = this.participants.filter((p) => this.pinnedParticipants.some((pt) => pt.id != p.id));
-        return (index$1.h(index$1.Host, { key: 'f969a4a4e84d759236f508c76b1f17f2ca6c86fc' }, index$1.h("main", { key: '2b3a1b073a00b9a4ce2ef52ac16135032c5bca16', part: "main" }, index$1.h(index$2.Render, { key: '0173d3ee87d82e2aa2cfd67d4c4a9539545c725d', element: "rtk-simple-grid", defaults: defaults, props: {
+        return (index$1.h(index$1.Host, { key: '78a47e090097d8c758b7e78678c60c66231559e4' }, index$1.h("main", { key: '405ea4039c11b49abe9b7636f94b966b2a02388f', part: "main" }, index$1.h(index$2.Render, { key: 'bff026528181c24c2c761aa354678cb61aa01169', 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 && (index$1.h("aside", { key: 'f6432185ad98bf81d7c76cd9abb26a17973692f8', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, index$1.h(index$2.Render, { key: '504cc9d09a30d0fb00533aa9bfbd33353b0bd08a', element: "rtk-simple-grid", defaults: defaults, props: {
+            } })), nonPinnedParticipants.length > 0 && (index$1.h("aside", { key: 'f2f77d8371fef0a83c5682d0dd7bf4d6c57ea69b', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, index$1.h(index$2.Render, { key: 'ba9e91c14b812c650275c4ae99bd602fb0f16aa0', element: "rtk-simple-grid", defaults: defaults, props: {
                 part: 'aside-grid',
                 participants: nonPinnedParticipants,
                 aspectRatio: this.aspectRatio,

package/dist/cjs/rtk-stage.cjs.entry.js

@@ -29,7 +29,7 @@ const RtkStage = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'f3dba7a49cfd4c051dfba4cef64430ec670512d8' }, index$1.h("slot", { key: '6500537d6fb1f3da3ede35f4e9aa3f227c71323f' })));
+        return (index$1.h(index$1.Host, { key: 'c28c425c3619477e0e9234f42ec5711a49d27a43' }, index$1.h("slot", { key: '8a4210ce0af731affd16bdab0258135f71b6408f' })));
     }
 };
 __decorate([

package/dist/cjs/rtk-transcript.cjs.entry.js

@@ -44,7 +44,7 @@ const RtkTranscript = class {
         }, 10000);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '12226276b5cd6bdc6f0dedf877a1f8829132b7e6' }, index$1.h("div", { key: '0fc2f4aa3e5be3a0339e353e89a187c410b17c18', class: "ctr" }, index$1.h("p", { key: 'ce7a0b3d519770b0588c062c49a5187a0432702c', class: "message" }, index$1.h("span", { key: '0a2cceb0e26b5aa2570f53a4651caf9fcd4971ed', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
+        return (index$1.h(index$1.Host, { key: '40777059dc796ccc9772d79ce7507762bc8f9323' }, index$1.h("div", { key: 'b2c9181f66d7dcc024d7f1dedee09429139285a1', class: "ctr" }, index$1.h("p", { key: '261023413c7bad6207249d93dbd61222aafa0df8', class: "message" }, index$1.h("span", { key: '822c6ecc8dd33bc9395f21a5bec49183f207fd7b', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
     }
     static get watchers() { return {
         "transcript": ["transcriptChanged"]

package/dist/cjs/rtk-ui-provider.cjs.entry.js

@@ -152,7 +152,7 @@ const RtkUiProvider = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: 'ce61aaa074ff4c285bb9b39ea420c456a03ea2b6' }, this.noRenderUntilMeeting && !this.meeting ? null : index.h("slot", null));
+        return index.h(index.Host, { key: '4c5b692de4bf1486e1c17ab6f9d61684705cfa95' }, this.noRenderUntilMeeting && !this.meeting ? null : index.h("slot", null));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/rtk-waiting-screen.cjs.entry.js

@@ -30,7 +30,7 @@ const RtkWaitingScreen = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '77f62eac2bfd382e325dbb6e1e2386c5eb3d13a6' }, index$1.h("slot", { key: 'efa083572c73db00e2db935fd44eefc85da2f22d' }, index$1.h("div", { key: 'f03cb8e9293d618bf17532ce139311998d6332f8', class: "centered", part: "content" }, index$1.h("rtk-logo", { key: '4f80c7bd29784e0edcb069c5f8c90ea6662831d4', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), index$1.h("p", { key: 'd8a7bd5e11b2bec6e9a108c6c1c64d2b45df4a66' }, this.t('waitlist.body_text'))))));
+        return (index$1.h(index$1.Host, { key: 'f2c47d3259b2df855467a20acb9c3cf9efba0656' }, index$1.h("slot", { key: 'f00f36e15ecf6279903d8512f3dee23057de734a' }, index$1.h("div", { key: '980543555369e3547a6ba36a4235e885ca65ee4b', class: "centered", part: "content" }, index$1.h("rtk-logo", { key: '9a82a757b90ceb5ec2d143cc2e4ba3a85e4b5ead', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), index$1.h("p", { key: 'e9c2f4e21f075ee74e147249bd52e8947bdfa37d' }, this.t('waitlist.body_text'))))));
     }
 };
 __decorate([

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

@@ -29,7 +29,7 @@ p {
   min-width: var(--rtk-space-40, 160px);
   align-items: center;
   padding-left: var(--rtk-space-3, 12px);
-  padding-right: var(--rtk-space-3, 12px);
+  padding-right: var(--rtk-space-2, 8px);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -81,28 +81,43 @@ rtk-icon.icon {
   color: rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));
 }
 
-rtk-icon.dismiss {
-  margin-left: auto;
-  height: var(--rtk-space-5, 20px);
-  width: var(--rtk-space-5, 20px);
-  border-radius: var(--rtk-border-radius-md, 8px);
+button.dismiss {
+  display: flex;
+  height: var(--rtk-space-6, 24px);
+  width: var(--rtk-space-6, 24px);
+  align-items: center;
+  justify-content: center;
+  border-width: var(--rtk-border-width-none, 0);
+  border-style: none;
+  padding: var(--rtk-space-0, 0px);
+  border-radius: var(--rtk-border-radius-sm, 4px);
+  background-color: transparent;
   color: rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));
+  outline-width: 1px;
+  outline-color: rgb(var(--rtk-colors-text-1000, 255 255 255));
 }
 
-rtk-icon.dismiss:hover {
+button.dismiss:hover {
   cursor: pointer;
   color: rgb(var(--rtk-colors-text-1000, 255 255 255));
 }
 
-rtk-icon.dismiss {
+button.dismiss:focus-visible {
+  outline-style: solid;
+}
+
+button.dismiss {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+.dismiss rtk-icon {
+  height: var(--rtk-space-5, 20px);
+  width: var(--rtk-space-5, 20px);
+}
+
 rtk-button {
-  margin-left: var(--rtk-space-4, 16px);
-  margin-right: var(--rtk-space-2, 8px);
   border-radius: var(--rtk-border-radius-sm, 4px);
 }
 
@@ -110,14 +125,7 @@ rtk-button {
   margin-left: auto;
   display: flex;
   align-items: center;
-}
-
-.right > * {
-  margin-left: var(--rtk-space-2, 8px);
-}
-
-.right > *:first-child {
-  margin-left: var(--rtk-space-0, 0px);
+  gap: var(--rtk-space-2, 8px);
 }
 
 :host(.exit) {