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

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

@@ -70,9 +70,10 @@ export class RtkClock {
         return time;
     }
     render() {
-        return (h(Host, { key: 'd831d119c2e44c4425a5177cc0638449bfc547c0', tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
-            h("rtk-icon", { key: 'ad15c7f2f8204d6677142b1d31e0a98fdac3130e', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
-            h("span", { key: '618dc61137349926d26c65664facbdbde01353e8', part: "text" }, this.getFormattedTime()),
+        const showClock = this.startedTime !== undefined;
+        return (h(Host, { key: '2775471382c6d07aae0ba8e18677d6850fd9cb34', "data-hidden": !showClock, tabIndex: 0, role: "timer", "aria-live": "off" }, this.startedTime !== undefined && [
+            h("rtk-icon", { key: '48b8bdfeef973d7f3eb4cdd526e386226a4b999a', icon: this.iconPack.clock, "aria-hidden": true, tabIndex: -1, part: "icon" }),
+            h("span", { key: '9f2bb7aa7adc6ecb65c5fef57e406801e6592e59', part: "text" }, this.getFormattedTime()),
         ]));
     }
     static get is() { return "rtk-clock"; }

package/dist/collection/components/rtk-grid-pagination/rtk-grid-pagination.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: flex;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -23,9 +21,12 @@ p {
   font-size: 16px;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host([size='sm']) {
-  margin-left: var(--rtk-space-1, 4px);
-  margin-right: var(--rtk-space-1, 4px);
   font-size: 12px;
 }
 
@@ -98,11 +99,6 @@ rtk-button {
   background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
 }
 
-:host([variant='grid']) {
-  margin-left: var(--rtk-space-0, 0px);
-  margin-right: var(--rtk-space-0, 0px);
-}
-
 :host([variant='grid']) rtk-button {
   position: absolute;
   top: 50%;

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

@@ -123,7 +123,7 @@ export class RtkGridPagination {
         const { meta } = this.meeting;
         const isAudioRoom = (meta === null || meta === void 0 ? void 0 : meta.viewType) === 'AUDIO_ROOM';
         if (isAudioRoom || !this.showPagination) {
-            return;
+            return h(Host, { "data-hidden": true });
         }
         return (h(Host, null, h("rtk-button", { class: "prev", variant: "secondary", kind: "icon", disabled: this.pageCount === 0, onClick: this.prevPage, "aria-label": this.t('page.prev') }, h("rtk-icon", { icon: this.iconPack.chevron_left })), this.variant !== 'grid' && (h("div", { class: "center" }, h("span", { class: "page" }, this.pageCount === 0 ? (h("rtk-tooltip", { label: this.t('layout.auto') }, h("rtk-button", { kind: "icon", class: "auto" }, h("rtk-icon", { icon: this.iconPack.wand })))) : (this.page)), this.pageCount !== 0 && [
             h("span", { class: "slash" }, "/"),

package/dist/collection/components/rtk-livestream-indicator/rtk-livestream-indicator.css

@@ -18,6 +18,11 @@ p {
   display: flex;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host[size='sm'] {
   margin-left: var(--rtk-space-1, 4px);
   margin-right: var(--rtk-space-1, 4px);

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

@@ -39,7 +39,7 @@ export class RtkLivestreamIndicator {
     }
     render() {
         if (!showLivestream(this.meeting) || !this.isLivestreaming)
-            return;
+            return h(Host, { "data-hidden": true });
         return (h(Host, null, h("div", { class: "indicator", "aria-label": this.t('livestream.indicator'), part: "indicator" }, h("rtk-icon", { icon: this.iconPack.start_livestream, size: this.size }), h("span", null, this.t('LIVE')))));
     }
     static get is() { return "rtk-livestream-indicator"; }

package/dist/collection/components/rtk-meeting-title/rtk-meeting-title.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-3, 12px);
-  margin-right: var(--rtk-space-3, 12px);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -22,6 +20,11 @@ p {
   color: rgb(var(--rtk-colors-text-1000, 255 255 255));
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 .title {
   text-align: center;
   overflow: hidden;

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

@@ -26,8 +26,8 @@ export class RtkMeetingTitle {
         var _a;
         const title = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.meta.meetingTitle;
         if (title == null)
-            return null;
-        return (h(Host, { tabIndex: 0, role: "banner", "aria-label": title }, h("rtk-tooltip", { label: title, part: "tooltip" }, h("div", { class: "title", part: "title" }, title))));
+            return h(Host, { "data-hidden": true });
+        return (h(Host, { role: "banner", "aria-label": title }, h("rtk-tooltip", { label: title, part: "tooltip" }, h("div", { class: "title", part: "title" }, title))));
     }
     static get is() { return "rtk-meeting-title"; }
     static get encapsulation() { return "shadow"; }

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) {

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

@@ -30,18 +30,26 @@ export class RtkNotification {
     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 (h(Host, { key: '97c09930a40443d2f0468ffc3623f197d04d3c62' }, h("div", { key: '099c921e90353f5965af50ef6019282d063692e9', class: "ctr" }, this.notification.icon != null && (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 (h(Host, { key: 'b6a7ede34064bcc25040589cd09b00a5e5a5cf8a' }, h("div", { key: '42608dc49ec59c0c54be513e59b81627f0ecb11c', class: "ctr" }, this.notification.icon != null && (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' && (h("img", { key: 'e2388975b8bea497a9d982037028bc7a269ab1fd', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: '252ae9de49d3cc8faf23dee76d9add01fd1c1958', class: "message" }, h(TextMessageView, { key: '07b7dc12a9678647a331a0755a1faee6fddc7c31', message: this.notification.message })), h("div", { key: '8609f56cf258e8c6fb3eb2507d66da83e1e04267', class: "right" }, this.notification.button != null && (h("rtk-button", { key: 'b2a250ca6f0b7460f1dae4d35dab0aa7e57f6ecb', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), 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' && (h("img", { key: '0e8d7812bd8b58ce0efe3edff6ae7346cbcd0fd4', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'f28ec5ff1a3902817d5501ea2324371defc8995a', class: "message" }, h(TextMessageView, { key: '7f7b179a67d125585ed70112fcb2a1925c3bae52', message: this.notification.message })), h("div", { key: '2ba60b2b60ddbc43d207adc86e0a975f3c432f70', class: "right" }, this.notification.button != null && (h("rtk-button", { key: '2f4871b0ee2871cbccb016e4451e28c424fe14ce', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '1786dac10dbc2ca9aabad707354ce16fe1af9bc8', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: 'b11c47705af86c38bd6488ecb6998aad62099396', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
     }
     static get is() { return "rtk-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -80,6 +88,25 @@ export class RtkNotification {
                 "getter": false,
                 "setter": false
             },
+            "paused": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stops timeout when true"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "paused",
+                "reflect": false
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -180,6 +207,9 @@ export class RtkNotification {
     }
     static get watchers() {
         return [{
+                "propName": "paused",
+                "methodName": "pausedChanged"
+            }, {
                 "propName": "notification",
                 "methodName": "notificationChanged"
             }];

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

@@ -86,6 +86,7 @@ export class RtkNotifications {
                 });
             }
         };
+        this.paused = false;
     }
     connectedCallback() {
         if (typeof document !== 'undefined') {
@@ -522,7 +523,7 @@ export class RtkNotifications {
             this.meeting.self.permissions.acceptWaitingRequests);
     }
     render() {
-        return (h(Host, { key: '5e997428b873dd19471cec88927d4e0f86a74e6e' }, this.notifications.map((notification) => (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 (h(Host, { key: '906188de5f85fcdb91e7bbd9fc44c60f722ec231' }, h("div", { key: '971924ad071ffa9525984eac3f11e929d10ec8a2', onMouseEnter: () => (this.paused = true), onFocusin: () => (this.paused = true), onMouseLeave: () => (this.paused = false), onFocusout: () => (this.paused = false) }, this.notifications.map((notification) => (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 }))))));
     }
     static get is() { return "rtk-notifications"; }
     static get encapsulation() { return "shadow"; }
@@ -685,7 +686,8 @@ export class RtkNotifications {
     }
     static get states() {
         return {
-            "notifications": {}
+            "notifications": {},
+            "paused": {}
         };
     }
     static get elementRef() { return "host"; }

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

@@ -30,7 +30,7 @@ export class RtkOverlayModal {
         }
     }
     render() {
-        return (h(Host, { key: '2c47006c013e278d9b65448f39e946458ba54158' }, h("rtk-icon", { key: 'daaa50fe0045a549f114d13c30059b79afaf4941', icon: this.states.activeOverlayModal.icon }), h("h2", { key: 'b75c58c750cad4dd10e80e7c1bb9ab2a6635cc64' }, this.states.activeOverlayModal.title), h("p", { key: '73f461f178f1924205cb9bed3e1605e358ce8c9f' }, this.states.activeOverlayModal.description)));
+        return (h(Host, { key: 'e5bdb94d07093b7b6950c5d389b3cca3c5f0bc22' }, h("rtk-icon", { key: '04dcace07d18e31644bb11215c069eb63ea8dfe6', icon: this.states.activeOverlayModal.icon }), h("h2", { key: '5ca79bee28c169a489a83e53e0911e6187c731f2' }, this.states.activeOverlayModal.title), h("p", { key: 'd4d7e34a08e991709b1931ce22c899dcc624c692' }, this.states.activeOverlayModal.description)));
     }
     static get is() { return "rtk-overlay-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-participant-count/rtk-participant-count.css

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: inline-flex;
   height: var(--rtk-space-10, 40px);
   -webkit-user-select: none;
@@ -23,9 +21,12 @@ p {
   align-items: center;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host([size='sm']) {
-  margin-left: var(--rtk-space-1, 4px);
-  margin-right: var(--rtk-space-1, 4px);
   font-size: 12px;
 }
 

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

@@ -63,7 +63,7 @@ export class RtkParticipantCount {
     }
     render() {
         if (this.isViewer)
-            return null;
+            return h(Host, { "data-hidden": true });
         return (h(Host, { tabIndex: 0, role: "log", "aria-label": `${this.participantCount} ${this.t('participants')}` }, h("rtk-icon", { icon: this.iconPack.people, tabIndex: -1, "aria-hidden": true, part: "icon" }), this.participantCount));
     }
     static get is() { return "rtk-participant-count"; }

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: 'ce131d63081a18dbb7078a6dd4904d6de8b43664' }, h("video", { key: '8e155c035aaeabc6f74a7ed9b2b0499a2957acc1', ref: (el) => (this.videoEl = el), class: {
+        return (h(Host, { key: '69573519e7127835dd9304dcfb507ebbb94e0de8' }, 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 }), h("slot", { key: 'e54ce30dea8f970c2e8577eaddeec51aebbe5dcf' })));
+            }, autoPlay: true, playsInline: true, muted: true }), h("slot", { key: '3bdccee7fb4e001425249fe832b4bdcb01751306' })));
     }
     static get is() { return "rtk-participant-setup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,10 +133,10 @@ export class RtkParticipantTile {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: 'd52e6943f39b48e4bbfab588d8cbbb65b345487f' }, h("video", { key: 'ab6f34d99cbfc482a2f4ab217fbcf94376fac8e3', ref: (el) => this.onVideoRef(el), class: {
+        return (h(Host, { key: '3e979a21a98a39b061612531ef9bd644d39a983e' }, 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 && (h("rtk-icon", { key: 'ec66f88d6381c86e4014012bfba6ea9ba3a05309', class: "pinned-icon", icon: this.iconPack.pin, "aria-label": this.t('pinned'), part: "pinned-icon" })), this.mediaConnectionError && (h("div", { key: '07ab333220bc599319b32860f30735efa303c1cd', class: "network-container", part: "network-indicator" }, h("rtk-icon", { key: 'fcc1a2531916e35926bf3bec25a57f99e057d1f1', class: "network-icon", icon: this.iconPack.disconnected, "aria-label": this.t('pinned'), part: "pinned-icon" }))), h("slot", { key: 'c93ed3a0436b26e949bbbb030d88a87af4e31310' }, h(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 && (h("rtk-icon", { key: '02ca6b139670e6ac3ac16a24248329a4dc09976d', class: "pinned-icon", icon: this.iconPack.pin, "aria-label": this.t('pinned'), part: "pinned-icon" })), this.mediaConnectionError && (h("div", { key: '5bf2f0b14e7d077b3ebd9bec74291bf746fcf6c9', class: "network-container", part: "network-indicator" }, h("rtk-icon", { key: '32ee83f5d08430273ae0bce3424e2e1a3206419a', class: "network-icon", icon: this.iconPack.disconnected, "aria-label": this.t('pinned'), part: "pinned-icon" }))), h("slot", { key: '781a75e98ff649fb94672cb7ce4f176ef0c1c090' }, h(Render, { key: 'b756c2269429153fbab8dd3c79978d0a2d3a153d', element: "rtk-participant-tile", defaults: defaults, childProps: {
                 participant: this.participant,
             }, deepProps: true, onlyChildren: true }))));
     }

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: '5c1ce4b10a43956964e2382e2434784617990be7' }, this.showPlayDialog && (h("rtk-dialog", { key: '572cd0cbb7e6919318ed412820cbe9bc0204178c', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, h("div", { key: '3c48ac9420996a4bfc68f80fc982609b7110c5b0', class: "modal" }, h("h3", { key: '20e87e695d0782d55a66401df6bbb6cebc8fe5c6' }, this.t('audio_playback.title')), h("p", { key: '26c2fa6e74d533c543a286559a5b5b8e0450b220' }, this.t('audio_playback.description')), h("rtk-button", { key: '7ac67b115d7ad2db95336c1a1d262ec3378c102d', kind: "wide", onClick: () => {
+        return (h(Host, { key: '8f6ac797ceb5f3fa6c8633e72174e9ae91e7979a' }, this.showPlayDialog && (h("rtk-dialog", { key: 'd1f5723dec7d7e9e66625deb9cebce63e26520e1', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, h("div", { key: 'cd0de80766e3f1c665666f463bf405f44ed8323d', class: "modal" }, h("h3", { key: '098d978b8c3aeba86328e23104fa7e73f12f2296' }, this.t('audio_playback.title')), h("p", { key: '74d242093687ab9734392a8d5357c7a2c5cce8b9' }, this.t('audio_playback.description')), h("rtk-button", { key: '6382f33f9b3907989c5559c49091f2173be708e3', 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: '022a9326d48692397a4b93a58b20b55942542f0d' }, h("div", { key: '292f4e26ddf2b65cecf3658d2d766734fa9fce86', class: "participants-container" }, !this.hideHeader && (h("div", { key: '6990d8f65de89a69ba0af146aa50790d132c676c', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '195b9d2ce76bba4ad934f4d776e003b3ab191fa3', 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: '54501f9cebd4dee4398cb0161341c72008a1bf22' }, h("div", { key: '9157670e4ed76beb38ad5c6e3405a1707ff8d262', class: "participants-container" }, !this.hideHeader && (h("div", { key: '71d44cb3842d749a19526068700f788727ff5c28', class: "heading-count", part: "heading-count" }, this.t('participants'), " (", this.participants.length, ")")), h("rtk-virtualized-participant-list", { key: '8239db7509da6cc5334b8d860e9954527febacf2', 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-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: 'c147d4a660955e2dfc9983399c933b0c94167b8e' }, h("h2", { key: '83d6494dcfeb87d4a69e0017f0fc19d02fcd087e' }, h("rtk-icon", { key: 'b91b71bda9a11dcebcd278b9443050175772e436', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: 'b2bcc6e71b71435679ae2b601e18d9fe3f15884c', 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: 'd6459cdc59b262d9aa64ab9327e3586efdc9cf54' }, this.getMessage()), !isDeniedBySystem && (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" }, h("rtk-icon", { key: 'befa0b687af79400e6f22c4f2078a703c2c43a7b', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: '3cfcef69f2279d05451b290c0f3ef2dbbab5cfa7', class: "actions" }, h("rtk-button", { key: '5b95ec238665d0417f9c5ddb0b5ff6937adde080', 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: 'a892cb955b1776bb54bb6e96d7e7234041d979a0' })));
+        return (h(Host, { key: '37bc20fd76370a473d701b99f141057e3ef7b9ea' }, h("h2", { key: '5177028bd1d1f909cc5dacffaf7a63e9a90a6119' }, h("rtk-icon", { key: 'eef420ebb45cedbd63f6f4532954a5175535c07e', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: '1f35d79d6e3b83341a26081fc72540863d395108', 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: '855ceb1e53e3006b85d32e0edd9eb0088f94ad75' }, this.getMessage()), !isDeniedBySystem && (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" }, h("rtk-icon", { key: '775423666928defb61670cd9a4c2e158fe6386e6', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: '023b8da610c0afea0abb203ae9d09286b3368ccf', class: "actions" }, h("rtk-button", { key: 'a2b29cb77e0f32076dc8bf0a72e6b2f512684201', 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: '2e7d6bcdb64f65de6e73742946a3a173905227a5' })));
     }
     static get is() { return "rtk-permissions-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,7 +55,7 @@ export class RtkPlugins {
         }
     }
     render() {
-        return (h(Host, { key: 'a4ef27530f9e18bc63f0c419219eb4ad0314a213' }, h("ul", { key: '348783b9aa3feb3a215a73a1f7fc1bb749c17da0', 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: '74f2d9af55a0670b4ae5406f73b333187e8c3d92' }, h("ul", { key: '955e4e2a9d101b5027ef725175996c8e72a94b30', 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: 'd37f42807d5e9ff32cd1a675d917a15ef38c1a50' }, h("div", { key: '2defb5e6817c6e52ef9d174e9139106d9f971304', class: "ctr" }, h("p", { key: '1f62d9493e4412fb8120dd6a1cdac8102d4bfd3f', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: '75315b70802cd4040f3a9feafe424f329fd2b397', class: "poll" }, h("p", { key: '562f274b9c9a37c181491ec2a10bc60dfb9b2f2e', class: "poll-question" }, this.poll.question), h("div", { key: 'b683a6f2d4f019f2abc0ede2db00559ee251601d', class: "poll-answers" }, h("span", { key: '8470f3dfc7e3ae98af53264e395678bf4a1df7af' }, this.t('polls.answers')), h("span", { key: '2a8bbbb9b06b5ae990b6076028c1305f7c8551b8' }, this.poll.voted.length)), this.poll.options.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '3436a978185495090fcf81a59f40e3d0f9bac969' }, h("div", { key: '1349450369add7268b290b2b75ca07aa28820683', class: "ctr" }, h("p", { key: 'f36ddcb1f30368e5b311fe7f11cca87785c9570c', class: "poll-title" }, this.t('polls.by'), " ", shorten(formatName(this.poll.createdBy), 20)), h("div", { key: '6c5ac869b1c182d09d9e1490a312797c913d24b1', class: "poll" }, h("p", { key: '1c3ca8f47cf9a08f3ac7ef47e144330b922534fc', class: "poll-question" }, this.poll.question), h("div", { key: 'e5e60be4359714828d1d25bb24f5f143a1c6428f', class: "poll-answers" }, h("span", { key: '60eeb63b59d1f3d8c44a1cbd53c42e82877f22d1' }, this.t('polls.answers')), h("span", { key: '6c6a42a4e6b84ec18ad94bcd4015ed4047b7b0aa' }, 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: 'ce91372243197e68b2323889fe6768afcb13712d' }, h("div", { key: 'd7e688b9e924ed8677eea21f7ba7fde844d8127a', class: "create-poll" }, h("p", { key: 'c240dde8fc2e10b092990a24a4c48205927f6661' }, this.t('polls.question')), h("textarea", { key: '52f17471f4e00db0f72aeaf5637b0d282170c905', onInput: () => {
+        return (h(Host, { key: 'a5d66ad4586b3e3bf360fc7f3330cbebfcc27d29' }, h("div", { key: 'ab293118b0a4e4f0839da8b1f28e8bb4c3075e00', class: "create-poll" }, h("p", { key: 'dd851c73436db148c85fa4ae605841acc4047114' }, this.t('polls.question')), 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) => (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: '18b094e5ed57c3fc67719820c21e04ce5a322bf7', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: '7466c849dbd7146fbc2e919ca240cf5b4ca87948' }, h("input", { key: '3523addb0bef26dd203ff0ace9cbc5c8e438a4dc', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: '0948aeedab995e2807f65da59db206620e559677' }, 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')), h("rtk-button", { key: 'ed358c58d852a658d5a32681ac948b3bcdc06935', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && 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) => (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: 'd33f567bcd74edf4ace17cd3a0ca36daf69eeb8c', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: '1ded9b5aeec6b5b5fec3cc2ec43c488b48a0568b' }, h("input", { key: '37047cb8a6ccb8c37fc56261fb2f32fa0ff19d92', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: '50ac11b8af600d337cc2a1d8ec934e1abac7eaf6' }, 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')), h("rtk-button", { key: '36f2228ca82a29f9d72f768fa65028690230a26f', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: 'fe7a37df641bcf672e8c85a87251df19d8d1fc91', 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

@@ -69,14 +69,14 @@ export class RtkPolls {
         smoothScrollToBottom(this.pollEl);
     }
     render() {
-        return (h(Host, { key: '90670e63e9732cdaf7fb40b8fc5c83d23169ffc2' }, h("div", { key: 'e1b10652531d40deef0753eba00f5e42a6ace030', class: "ctr", part: "container" }, h("div", { key: 'ff8549851c499d5e52c7ea44ff02542a9216463b', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: 'cd06ef857955de65e4aaa60ee1b5419c379e1a9c', class: "empty-polls" }, this.t('polls.empty'))), this.polls.map((item) => {
+        return (h(Host, { key: 'aac0c84486146fa17436746fb6def9cc4e539a2c' }, h("div", { key: '179c4496372623a2ea2f7c0b555b84ea1cae12ee', class: "ctr", part: "container" }, h("div", { key: '07b09fc28d75b1d40dec83eecae3661dfca1dbd2', class: "polls-view scrollbar", ref: (el) => (this.pollEl = el), part: "polls" }, this.polls.length == 0 && this.create !== true && (h("div", { key: '841f91b0da755e48498c520a8234cf6b926b058c', 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: '41f8908f7485faf89738cea1f2ccb816fb6c094f', part: "poll-form", onRtkCreatePoll: (e) => {
+        }), this.create && (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 && (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 && (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 is() { return "rtk-polls"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,11 +13,14 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: block;
 }
 
+/* useful for removing from layouts that may have gap */
+:host([data-hidden]) {
+  display: none;
+}
+
 :host[size='sm'] {
   margin-left: var(--rtk-space-1, 4px);
   margin-right: var(--rtk-space-1, 4px);

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

@@ -44,7 +44,7 @@ export class RtkRecordingIndicator {
         }
     }
     render() {
-        return (h(Host, { key: 'b08cb38ca93d2db33679ac266e18063c4a2756cf' }, this.isRecording && (h("div", { key: '5ba29ae19d2b338f32ec07ec2ef2662c61a7b5f9', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: '6ed9ed4a1191ee245f4d1315fcf9f9a6c958687e', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: 'c7bb79757e0b9ce8b4637645efbef75fb22e2a33' }, this.t('recording.label'))))));
+        return (h(Host, { key: '3919ce20c5524d477536f62b9dd5abe8c1d49c37', "data-hidden": !this.isRecording }, this.isRecording && (h("div", { key: 'c482fdc00ff90f8ae2841f8d469f3b54704b6615', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: '75663e533fe47c5ad2e5d55db5d8a027fc12220c', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: '99d4cc0c9ce7388808b643b0bcce27883d2b4643' }, 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: '60edea950d73ace6447569fd3862c48925d24339', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '2c1ba4c2c053ded45060f453e47864662e6b49e1', ref: (el) => (this.videoEl = el), class: {
+        return (h(Host, { key: 'c5fe06d9c1bfd2856b2eb93bb55b7c636256052f', class: { isSelf } }, h("div", { key: "video-container", id: "video-container", class: { expand: this.videoExpanded } }, h("video", { key: '5bdd1b7bd0e28ecb4b551b30f6e623c7a1ece49a', 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: 'b5264cba99a0840d6be7841b68c633df3042e5bb', label: text }, h("rtk-button", { key: '93711a3eb4b848df8fbe16e1be1e661109908e66', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: 'b9c73ac5b6b247969b69c21dbc368372e0cdace4', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: 'c9878c8a0eaa4c25e18855a56357115fc19acf09' }, this.t('screenshare.shared')), h("div", { key: '1aacb8a470ec255facc44d666cc9565364f44809', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '324558ed4a0115586aea78d69ecb94793ad7f731', 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: 'fdfd7c6b5468ef96bdb06d4f942a3e10cbee08cb', label: text }, h("rtk-button", { key: '99e0138257f6e0ec55ceee7f20318d78887f812b', id: "full-screen-btn", kind: "icon", onClick: this.toggleFullScreen, title: text }, h("rtk-icon", { key: '06e747a6af4a5b79445ffb63598afd2ac515d3a2', icon: icon, "aria-hidden": true, tabIndex: -1 }))))), isSelf && (h("div", { id: "self-message", key: "self-message" }, h("h3", { key: '1ad96435977e90e6f0eff64a54507d106a4091be' }, this.t('screenshare.shared')), h("div", { key: '02f1e2a734d3f56157ab76c1de55517995d8f98d', class: "actions" }, this.meeting != null && (h("rtk-button", { key: '4bc8344f8a829ff1a12552d9002d83032ec7277f', variant: "danger", onClick: () => {
                 this.meeting.self.disableScreenShare();
-            } }, h("rtk-icon", { key: 'c21f7fe06c0ddfbd6558f6facfc10a3777974618', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '1747d034e775efe0f6f483afd22b3635c8db12b6', variant: "secondary", id: "expand-btn", onClick: () => {
+            } }, h("rtk-icon", { key: 'c2412bb995c605f980859481200033a447147b91', icon: this.iconPack.share_screen_stop, slot: "start" }), this.t('screenshare.stop'))), h("rtk-button", { key: '0d513e8b6efa96b542d6bd163db81a179073ed45', variant: "secondary", id: "expand-btn", onClick: () => {
                 this.videoExpanded = !this.videoExpanded;
-            } }, h("rtk-icon", { key: 'e4edd0c3b9158eeabe313520f4214716668d4015', icon: this.videoExpanded
+            } }, 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'))))), h("slot", { key: 'a115d046871670b009dbb8be22f9fad93fafea6a' })));
+            : this.t('screenshare.max_preview'))))), h("slot", { key: '2858a3123887f964d6e8ea77fb871abddc4c6295' })));
     }
     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: 'e94a22b4a0fea761f050247af7af496627353d07', title: text }, 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 (h(Host, { key: '11653f887305c7ba74c0e62197b0b8502f64bb22', title: text }, 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 })));
     }
     static get is() { return "rtk-settings-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class RtkSetupScreen {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: '381d4439ff09cec4bded24f3aaf133300d22eee6' }, h("div", { key: '6eb5aba251ccceace8ae1a002119b18e19101d5f', class: "container" }, h("div", { key: 'b28744700f5e375fd76cc541e881a693fcae1db8', class: 'container-tile' }, h(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 }), h("div", { key: '535be5e0cd9dd54bc9a8eaeafeb1ff400002a40c', class: 'media-selectors' }, h("rtk-microphone-selector", Object.assign({ key: '4372044b3190a1b6b870f18f582c3482e51247da' }, defaults, { variant: "inline" })), h("rtk-camera-selector", Object.assign({ key: '05b524a826d6f08e824ae7d4322964e08e7d5b17' }, defaults, { variant: "inline" })), h("rtk-speaker-selector", Object.assign({ key: 'ea1994e0688d368011892c093266d6d5e44f667a' }, defaults, { variant: "inline" })))), h("div", { key: 'e519f17b8b0f0e62d43c68c0a60b11cc67b15f0f', class: "metadata" }, h("div", { key: 'c5623e21796952587613edd9a7044409cb02cb4f', class: "name" }, this.t('setup_screen.join_in_as')), h("div", { key: '1331bc562722616956fa81f727e092a3e0a362e2', class: "label" }, h("div", { key: 'ef01a68f30113400a4fb53e6764748fa674e80b9', class: "name" }, !this.canEditName && shorten(this.displayName, 20))), this.canEditName && (h("input", { key: 'd101488e167a8bbecf9e8e316314faccc4617f20', placeholder: this.t('setup_screen.your_name'), value: this.displayName, spellcheck: false, autoFocus: true, ref: (el) => {
+        return (h(Host, { key: '4d337a1e3a71a0651fa082a149298129dd7b984a' }, h("div", { key: '24fda5fbca3b4dd0092031d54b90632a20ecc287', class: "container" }, h("div", { key: 'c1d947c44ba11b69f9679c03cd7423581e427a04', class: 'container-tile' }, h(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 }), h("div", { key: 'f0b35c6d5354c3416e72132d53bdda9fd770505b', class: 'media-selectors' }, h("rtk-microphone-selector", Object.assign({ key: 'daec71962a0d368e91fa7d410c09be0321d6e7e1' }, defaults, { variant: "inline" })), h("rtk-camera-selector", Object.assign({ key: 'b61f2afe68d92c48a199bcb22e1df124c392c22d' }, defaults, { variant: "inline" })), h("rtk-speaker-selector", Object.assign({ key: '8368f850725151e63ff390a2a721164e8923a762' }, defaults, { variant: "inline" })))), h("div", { key: 'd29f5f5e680e4614cf5ee378a1533c0e1235cf7c', class: "metadata" }, h("div", { key: 'c0b7e8ef018d34f447775f55e8244927314d70c3', class: "name" }, this.t('setup_screen.join_in_as')), h("div", { key: 'a45332643ef73dd286e48d2ba9b6bddd9625ab60', class: "label" }, h("div", { key: '71633d8d8987bafaa054edace2a18a9960d45f48', class: "name" }, !this.canEditName && shorten(this.displayName, 20))), this.canEditName && (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;
@@ -89,7 +89,7 @@ export class RtkSetupScreen {
                 if (e.key === 'Enter') {
                     this.join();
                 }
-            } })), h("rtk-button", { key: 'b80a3f917453ed29dec1b6b406065f96a7030aa0', 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", { key: '0ca7a9fb334f82d3f59720bd37246749ce62e86a', class: "no-network-badge" }, h("rtk-icon", { key: 'd43d5507a164ac734dddb6496cd2910aa81deb98', size: "md", variant: "danger", icon: this.iconPack.disconnected }), this.connectionState === 'failed'
+            } })), h("rtk-button", { key: '16599f17361ab91cee7af782e18ac55a75de2f95', 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", { key: 'ce111c7cbcd7ce227bd5eda1d9498621f5de0286', class: "no-network-badge" }, 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/collection/components/rtk-simple-grid/rtk-simple-grid.js

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