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

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-d3eba4b9.js');
-const uiStore = require('./ui-store-790d3fec.js');
-const index = require('./index-2154d3c1.js');
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const canJoinStage = (meeting) => {
     var _a, _b;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-d3eba4b9.js');
-const uiStore = require('./ui-store-790d3fec.js');
-const index = require('./index-2154d3c1.js');
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const rtkStageCss = ":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{display:block;position:relative;overflow:hidden}";
 const RtkStageStyle0 = rtkStageCss;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-d3eba4b9.js');
-const uiStore = require('./ui-store-790d3fec.js');
-const index = require('./index-2154d3c1.js');
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const rtkTranscriptCss = ":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;color:rgb(var(--rtk-colors-text-1000, 255 255 255));display:flex;justify-content:center;vertical-align:middle;animation:show 0.4s ease;transition:0.4s;z-index:5;width:100%}.ctr{box-sizing:border-box;display:inline-flex;height:100%;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;padding:var(--rtk-space-3, 12px);overflow:auto;max-width:50%}.message{margin:var(--rtk-space-0, 0px);display:inline-block;justify-content:center;max-width:100%;text-wrap:wrap;line-height:1.5rem}.message .name{font-weight:bold}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateY(120px)}100%{opacity:1;transform:translateY(0px)}}@keyframes exit{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-120px)}}:host([size='sm']){font-size:14px}";
 const RtkTranscriptStyle0 = rtkTranscriptCss;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-d3eba4b9.js');
-const uiStore = require('./ui-store-790d3fec.js');
-const index = require('./index-2154d3c1.js');
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 const clone = require('./clone-2e9a4cae.js');
 require('./keysIn-8bdbe83d.js');
 require('./isObjectLike-73d13a39.js');

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d3eba4b9.js');
-const uiStore = require('./ui-store-790d3fec.js');
-const config = require('./config-a123c409.js');
+const index = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const config = require('./config-dba24e25.js');
 const size = require('./size-2a406e36.js');
 require('./keysIn-8bdbe83d.js');
 require('./isObjectLike-73d13a39.js');

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-d3eba4b9.js');
-const uiStore = require('./ui-store-790d3fec.js');
-const index = require('./index-2154d3c1.js');
+const index$1 = require('./index-05554ce6.js');
+const uiStore = require('./ui-store-3ddce955.js');
+const index = require('./index-daae8cee.js');
 
 const rtkWaitingScreenCss = ":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{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.centered{display:flex;flex-direction:column;align-items:center}rtk-logo{margin-bottom:var(--rtk-space-8, 32px);height:var(--rtk-space-12, 48px)}p{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
 const RtkWaitingScreenStyle0 = rtkWaitingScreenCss;

package/dist/cjs/{sidebar-864a0b7a.js → sidebar-a3c87828.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const uiStore = require('./ui-store-790d3fec.js');
+const uiStore = require('./ui-store-3ddce955.js');
 
 const canViewChat = (meeting) => {
     if (meeting && !meeting.chat)

package/dist/cjs/{ui-store-790d3fec.js → ui-store-3ddce955.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-d3eba4b9.js');
+const index = require('./index-05554ce6.js');
 
 /**
  * Can view the livestream
@@ -476,6 +476,7 @@ const defaultConfig = {
             gridTemplateColumns: 'repeat(3, 1fr)',
             gridTemplateRows: '1fr',
             alignItems: 'center',
+            '--header-section-gap': 'var(--dyte-space-2, 8px)',
         },
         'rtk-header.sm': {
             display: 'grid',
@@ -483,12 +484,14 @@ const defaultConfig = {
             gridTemplateColumns: 'repeat(2, 1fr)',
             gridTemplateRows: '1fr',
             alignItems: 'center',
+            '--header-section-gap': 'var(--dyte-space-1, 4px)',
         },
         'div#header-left': {
             display: 'flex',
             alignItems: 'center',
             height: '48px',
             wordBreak: 'break-all',
+            gap: 'var(--header-section-gap)',
         },
         'rtk-logo': {
             height: '26px',
@@ -498,11 +501,14 @@ const defaultConfig = {
             alignItems: 'center',
             justifyContent: 'center',
             wordBreak: 'break-all',
+            gap: 'var(--header-section-gap)',
+            paddingInline: 'var(--dyte-space-3, 12px)',
         },
         'div#header-right': {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'flex-end',
+            gap: 'var(--header-section-gap)',
         },
         'rtk-stage': {
             display: 'flex',

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

@@ -31,10 +31,11 @@ export class RtkButton {
         this.type = 'button';
     }
     render() {
-        return (h(Host, { key: 'a75698a2fea0a57713401fad47f7f637e6e7a0de' }, h("button", { key: 'e4d9a8c8bf2a18dd271e9e857b1a8239efdcfb48', part: "button", type: this.type, disabled: this.disabled }, h("span", { key: 'bc4886ff0aae6e20adc32c130fa90cfeeeddc40c', class: "start" }, h("slot", { key: '13a7629dfcc14cacebdbde86cafc8e8d85003daa', name: "start" })), h("span", { key: '4b621dcce5e777048ccb519f26db32430d59fdd2', class: "content", part: "content" }, h("slot", { key: 'a94f9ff0e4a3d58e9c50780e35899181e051c260' })), h("span", { key: 'c7a1430740bb23e5835c834704d1eb5aacd62bf9', class: "end" }, h("slot", { key: 'ecfc59b45264186785789b81ecab35f62c04d33d', name: "end" })))));
+        return (h(Host, { key: 'c6135911cab1cd37d5ebd46269f76fd175c41d25' }, h("button", { key: 'f1872eb9efc1c00b36ab8729ac27c303cd4d775e', part: "button", type: this.type, disabled: this.disabled }, h("span", { key: '5a56e98710749503987b045bbe9d833e5708a26c', class: "start" }, h("slot", { key: '0963cce1a1788c816503176c05346839fd302fdc', name: "start" })), h("span", { key: 'c19dab69abffcea5926e04799aa29dc946ccedf9', class: "content", part: "content" }, h("slot", { key: 'c89ef75f65e53e26ba85922c2191d411ea445df4' })), h("span", { key: '0eed62f1fcdc33939f41c10e4cf9ddb47dbc379d', class: "end" }, h("slot", { key: '3376b8976558c0265837b4f86fa07300f84f2469', name: "end" })))));
     }
     static get is() { return "rtk-button"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["rtk-button.css"]

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

@@ -101,13 +101,19 @@ export class RtkChatToggle {
             this.chatActive = states.activeSidebar === true && states.sidebar === 'chat';
         }
     }
+    handleChatActiveChange() {
+        // Chat sidebar closed without opening a different sidebar
+        if (!this.chatActive && !this.states.activeSidebar) {
+            this.buttonEl.focus();
+        }
+    }
     render() {
         if (!this.canViewChat)
             return h(Host, { "data-hidden": true });
         return (h(Host, { title: this.t('chat') }, usePaginatedChat(this.meeting)
             ? this.hasNewMessages && h("div", { class: "unread-count-dot", part: "unread-count-dot" })
             : this.unreadMessageCount !== 0 &&
-                !this.chatActive && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, this.unreadMessageCount <= 100 ? this.unreadMessageCount : '99+'))), h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.chatActive }, onClick: this.toggleChat, icon: this.iconPack.chat, label: this.t('chat'), variant: this.variant })));
+                !this.chatActive && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, this.unreadMessageCount <= 100 ? this.unreadMessageCount : '99+'))), h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.chatActive }, onClick: this.toggleChat, icon: this.iconPack.chat, label: this.t('chat'), variant: this.variant })));
     }
     static get is() { return "rtk-chat-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -309,6 +315,9 @@ export class RtkChatToggle {
             }, {
                 "propName": "states",
                 "methodName": "statesChanged"
+            }, {
+                "propName": "chatActive",
+                "methodName": "handleChatActiveChange"
             }];
     }
 }

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

@@ -13,8 +13,6 @@ p {
 
 
 :host {
-  margin-left: var(--rtk-space-2, 8px);
-  margin-right: var(--rtk-space-2, 8px);
   display: inline-flex;
   align-items: center;
   -webkit-user-select: none;
@@ -27,9 +25,12 @@ p {
   font-variant-numeric: tabular-nums;
 }
 
+/* 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-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-controlbar-button/rtk-controlbar-button.js

@@ -28,10 +28,11 @@ export class RtkControlbarButton {
         this.brandIcon = false;
     }
     render() {
-        return (h(Host, { key: '3170196be51638562b89397c6b7cfee143e36253' }, h("button", { key: 'a15f74dca82c8b5dce841cc9b7fabc1eff29f79b', "aria-label": this.label, part: "button" }, this.isLoading ? (h("rtk-spinner", { id: "icon", part: "spinner", iconPack: this.iconPack })) : (h("rtk-icon", { id: "icon", icon: this.icon, tabIndex: -1, "aria-hidden": true, part: "icon" })), h("span", { key: '940ed7a610d8d5ac5fec7d6759d7b065f157f250', class: "label", part: "label" }, this.label), this.showWarning && (h("rtk-icon", { key: '94efa90a82eedb5923bb539776744d4e91e45c0f', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" })))));
+        return (h(Host, { key: '9a1150fd8a0fbd0022f33f325e7413d0670d0820' }, h("button", { key: '0fabd8a63a8013e1630dd3838f0c2f1378f423f7', "aria-label": this.label, part: "button" }, this.isLoading ? (h("rtk-spinner", { id: "icon", part: "spinner", iconPack: this.iconPack })) : (h("rtk-icon", { id: "icon", icon: this.icon, tabIndex: -1, "aria-hidden": true, part: "icon" })), h("span", { key: '117f1bff41fb719a832ef89d000b2abef6f1388a', class: "label", part: "label" }, this.label), this.showWarning && (h("rtk-icon", { key: '4d8b9170c833a930e013613089755ec768df0695', id: "warning-indicator", icon: this.iconPack.warning, part: "warning-indicator" })))));
     }
     static get is() { return "rtk-controlbar-button"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["rtk-controlbar-button.css"]

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-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-participants-toggle/rtk-participants-toggle.js

@@ -112,12 +112,17 @@ export class RtkParticipantsToggle {
             activeAI: false,
         });
     }
+    handleParticipantsActiveChange() {
+        // Participants sidebar closed without opening a different sidebar
+        if (!this.participantsActive && !this.states.activeSidebar) {
+            this.buttonEl.focus();
+        }
+    }
     render() {
         if (!this.canViewParticipants)
             return h(Host, { "data-hidden": true });
         const text = this.t('participants');
-        // const badgeCount = this.waitlistedParticipants.length + this.stageRequestedParticipants.length;
-        return (h(Host, { title: text }, this.badgeCount !== 0 && !this.participantsActive && (h("div", { class: "waiting-participants-count", part: "waiting-participants-count" }, h("span", null, this.badgeCount <= 100 ? this.badgeCount : '99+'))), h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.participantsActive }, onClick: () => this.toggleParticipantsTab(), icon: this.iconPack.participants, label: text, variant: this.variant })));
+        return (h(Host, { title: text }, this.badgeCount !== 0 && !this.participantsActive && (h("div", { class: "waiting-participants-count", part: "waiting-participants-count" }, h("span", null, this.badgeCount <= 100 ? this.badgeCount : '99+'))), h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.participantsActive }, onClick: () => this.toggleParticipantsTab(), icon: this.iconPack.participants, label: text, variant: this.variant })));
     }
     static get is() { return "rtk-participants-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -320,6 +325,9 @@ export class RtkParticipantsToggle {
             }, {
                 "propName": "states",
                 "methodName": "statesChanged"
+            }, {
+                "propName": "participantsActive",
+                "methodName": "handleParticipantsActiveChange"
             }];
     }
 }

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

@@ -68,11 +68,17 @@ export class RtkPluginsToggle {
             activeAI: false,
         });
     }
+    handlePluginsActiveChange() {
+        // Plugins sidebar closed without opening a different sidebar
+        if (!this.pluginsActive && !this.states.activeSidebar) {
+            this.buttonEl.focus();
+        }
+    }
     render() {
         if (!this.canViewPlugins)
             return h(Host, { "data-hidden": true });
         const text = this.t('plugins');
-        return (h(Host, { title: text }, h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.pluginsActive }, onClick: () => this.togglePlugins(), icon: this.iconPack.rocket, label: text, variant: this.variant })));
+        return (h(Host, { title: text }, h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.pluginsActive }, onClick: () => this.togglePlugins(), icon: this.iconPack.rocket, label: text, variant: this.variant })));
     }
     static get is() { return "rtk-plugins-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -272,6 +278,9 @@ export class RtkPluginsToggle {
             }, {
                 "propName": "states",
                 "methodName": "statesChanged"
+            }, {
+                "propName": "pluginsActive",
+                "methodName": "handlePluginsActiveChange"
             }];
     }
 }

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

@@ -79,13 +79,19 @@ export class RtkPollsToggle {
             activeAI: false,
         });
     }
+    handlePollsActiveChange() {
+        // Polls sidebar closed without opening a different sidebar
+        if (!this.pollsActive && !this.states.activeSidebar) {
+            this.buttonEl.focus();
+        }
+    }
     render() {
         if (!this.canViewPolls)
             return h(Host, { "data-hidden": true });
         const text = this.t('polls');
         // TODO(callmetarush): Just showing polls for all V2 users irrespective of themes
         // untill we get ui theme for V2.
-        return (h(Host, { title: text }, this.unreadPollsCount !== 0 && !this.pollsActive && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, this.unreadPollsCount <= 100 ? this.unreadPollsCount : '99+'))), h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.pollsActive }, onClick: () => this.togglePollsTab(), icon: this.iconPack.poll, label: text, variant: this.variant })));
+        return (h(Host, { title: text }, this.unreadPollsCount !== 0 && !this.pollsActive && (h("div", { class: "unread-count", part: "unread-count" }, h("span", null, this.unreadPollsCount <= 100 ? this.unreadPollsCount : '99+'))), h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.pollsActive }, onClick: () => this.togglePollsTab(), icon: this.iconPack.poll, label: text, variant: this.variant })));
     }
     static get is() { return "rtk-polls-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -286,6 +292,9 @@ export class RtkPollsToggle {
             }, {
                 "propName": "states",
                 "methodName": "statesChanged"
+            }, {
+                "propName": "pollsActive",
+                "methodName": "handlePollsActiveChange"
             }];
     }
 }

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: 'b76ca6a6d3dea0df7318e8882055dcd04dbd7a46', "data-hidden": !this.isRecording }, this.isRecording && (h("div", { key: '32d34242dbeb17c11067f51c5fbf0b1ebd7ef541', class: "indicator", "aria-label": this.t('recording.indicator'), part: "indicator" }, h("rtk-icon", { key: 'fb7851e4bb57e4193afc05edbfe9b24122a5b743', icon: this.iconPack.recording, "aria-hidden": true, tabIndex: -1, part: "icon" }), h("span", { key: 'de677e81dc576b9188b896ecbb458a62b5bd74dc' }, this.t('recording.label'))))));
     }
     static get is() { return "rtk-recording-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,6 @@ export class RtkSidebar {
     }
     disconnectedCallback() {
         var _a, _b;
-        document.removeEventListener('keydown', this.keydownListener);
         (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.removeListener('stageStatusUpdate', this.onStageStatusUpdate);
         this.onStageStatusUpdate = null;
     }
@@ -79,12 +78,6 @@ export class RtkSidebar {
     viewChanged(view) {
         if (view === 'full-screen') {
             this.enablePinning = false;
-            this.keydownListener = (e) => {
-                if (e.key === 'Escape') {
-                    this.close();
-                }
-            };
-            document.addEventListener('keydown', this.keydownListener);
         }
         else {
             this.enablePinning = true;

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

@@ -23,20 +23,39 @@ export class RtkSidebarUi {
         this.hideCloseAction = false;
         /** Icon Pack */
         this.iconPack = defaultIconPack;
+        /** Option to focus close button when opened */
+        this.focusCloseButton = true;
         /** Language */
         this.t = useLanguage();
         this.onClose = () => {
             this.sidebarClose.emit();
         };
     }
+    componentDidLoad() {
+        this.keydownListener = (e) => {
+            if (e.key === 'Escape') {
+                this.onClose();
+            }
+        };
+        this.hostEl.addEventListener('keydown', this.keydownListener);
+        this.handleFocusCloseButton();
+    }
+    handleFocusCloseButton() {
+        if (this.currentTab !== 'chat' && !this.hideCloseAction) {
+            this.closeButton.focus();
+        }
+    }
+    disconnectedCallback() {
+        this.hostEl.removeEventListener('keydown', this.keydownListener);
+    }
     render() {
         const isFullScreen = this.view === 'full-screen';
         const activeTab = this.tabs.find((tab) => tab.id === this.currentTab);
-        return (h(Host, { key: '7e7b26b4e4ee46ca3a2736954dd696cfacf778fd', class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: 'd8a79d17cefc4bb509545f42f1079e7a5827753d', variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: 'b1d5af04e05834fbf8cc11632b16517712e7868a', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '8b11b797a4dea3eb59f3f3840adb312cca5e9e60', class: "main-header" }, h("h3", { key: 'b242b4d75916bcdfbac23acfdc3c8576e362cc65' }, activeTab.name), h("slot", { key: '7484af9d5711eae12ab57bf186e6657f04098b29', name: "pinned-state" }))), isFullScreen && (h("header", { key: '71f70ff55b811ebe2f68ef3d8456ec0a686f292c', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
+        return (h(Host, { key: '4afc881e8aeb5f51014817e1287aed7700bb56fb', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: 'e95b2c25d32535630e0ccf30b46f067395c41a7f', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '0d6398171fbebd8d9b0895fc2e9f0b08e7980ab2', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: 'e92a6c60fa280a36b4643873d48adca3210e3c51', class: "main-header" }, h("h3", { key: '8097b3e815c3005c7750c7076eb54242406034a9' }, activeTab.name), h("slot", { key: 'f91814a6fb62726790ae5c91111be0f6d1ea121c', name: "pinned-state" }))), isFullScreen && (h("header", { key: '5ec434bbc22ffa7acf8a76361e02718080c7a99d', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
                 this.tabChange.emit(tab.id);
             }, class: {
                 active: this.currentTab === tab.id,
-            } }, tab.name))))), h("slot", { key: '095e9ef2c92879725c5d10d3e4583a10aad66911', name: this.currentTab })));
+            } }, tab.name))))), h("slot", { key: '77ee9da399e6991cc7bf3e0d979ffeec47e4b769', name: this.currentTab })));
     }
     static get is() { return "rtk-sidebar-ui"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +198,26 @@ export class RtkSidebarUi {
                 "setter": false,
                 "defaultValue": "defaultIconPack"
             },
+            "focusCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Option to focus close button when opened"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "focus-close-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "t": {
                 "type": "unknown",
                 "mutable": false,
@@ -238,6 +277,12 @@ export class RtkSidebarUi {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "currentTab",
+                "methodName": "handleFocusCloseButton"
+            }];
+    }
 }
 __decorate([
     SyncWithStore()

package/dist/collection/components/rtk-viewer-count/rtk-viewer-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;
@@ -24,9 +22,12 @@ p {
   font-size: 14px;
 }
 
+/* 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;
 }