refactor(cc-block)!: rework component and introduce slot stack

src/components/cc-addon-admin/cc-addon-admin.js

@@ -102,10 +102,12 @@ export class CcAddonAdmin extends LitElement {
   render() {
     return html`
       <cc-block>
-        <div slot="title">${i18n('cc-addon-admin.admin')}</div>
+        <div slot="header-title">${i18n('cc-addon-admin.admin')}</div>
 
         ${this.state.type === 'error'
-          ? html` <cc-notice intent="warning" message="${i18n('cc-addon-admin.error-loading')}"></cc-notice> `
+          ? html`
+              <cc-notice slot="content" intent="warning" message="${i18n('cc-addon-admin.error-loading')}"></cc-notice>
+            `
           : ''}
         ${this.state.type !== 'error' ? this._renderContent(this.state) : ''}
       </cc-block>
@@ -125,7 +127,7 @@ export class CcAddonAdmin extends LitElement {
     const shouldShowVmText = !this.noDangerZoneVmText;
 
     return html`
-      <cc-block-section>
+      <cc-block-section slot="content">
         <div slot="title">${i18n('cc-addon-admin.heading.name')}</div>
         <div slot="info"></div>
         <div class="one-line-form">
@@ -148,7 +150,7 @@ export class CcAddonAdmin extends LitElement {
         </div>
       </cc-block-section>
 
-      <cc-block-section>
+      <cc-block-section slot="content">
         <div slot="title">${i18n('cc-addon-admin.heading.tags')}</div>
         <div slot="info">${i18n('cc-addon-admin.tags-description')}</div>
         <div class="one-line-form">
@@ -172,7 +174,7 @@ export class CcAddonAdmin extends LitElement {
         </div>
       </cc-block-section>
 
-      <cc-block-section>
+      <cc-block-section slot="content">
         <div slot="title" class="danger">${i18n('cc-addon-admin.danger-zone')}</div>
         <div slot="info" class="danger-desc">
           <p>${i18n('cc-addon-admin.delete-disclaimer')}</p>

src/components/cc-addon-backups/cc-addon-backups.js

@@ -253,10 +253,15 @@ export class CcAddonBackups extends LitElement {
   render() {
     return html`
       <cc-block>
-        <div slot="title">${i18n('cc-addon-backups.title')}</div>
-
+        <div slot="header-title">${i18n('cc-addon-backups.title')}</div>
         ${this.state.type === 'error'
-          ? html` <cc-notice intent="warning" message="${i18n('cc-addon-backups.loading-error')}"></cc-notice> `
+          ? html`
+              <cc-notice
+                slot="content"
+                intent="warning"
+                message="${i18n('cc-addon-backups.loading-error')}"
+              ></cc-notice>
+            `
           : ''}
         ${this.state.type === 'loading' ? this._renderLoading(this.state) : ''}
         ${this.state.type === 'loaded' ? this._renderLoaded(this.state) : ''}
@@ -271,10 +276,10 @@ export class CcAddonBackups extends LitElement {
    */
   _renderLoading(state) {
     return html`
-      <div>
+      <div slot="content">
         <span class="skeleton"> ${fakeString(150)} </span>
       </div>
-      ${this._renderBackups(state)}
+      ${this._renderBackups(state, false)}
     `;
   }
 
@@ -285,28 +290,30 @@ export class CcAddonBackups extends LitElement {
    */
   _renderLoaded(state) {
     const hasData = state.backups.length > 0;
+    const isBlurred = this._overlayType === 'restore' || this._overlayType === 'delete';
 
     return html`
-      <div>${this._getDescription(state.providerId)}</div>
+      <div slot="content" class=${classMap({ blurred: isBlurred })}>${this._getDescription(state.providerId)}</div>
 
-      ${!hasData ? html` <div class="cc-block_empty-msg">${i18n('cc-addon-backups.empty')}</div> ` : ''}
-      ${hasData ? this._renderBackups(state) : ''}
+      ${!hasData ? html` <div slot="content" class="empty-msg">${i18n('cc-addon-backups.empty')}</div> ` : ''}
+      ${hasData ? this._renderBackups(state, isBlurred) : ''}
       ${this._overlayType === 'restore' ? this._renderRestoreOverlay(state.providerId, state.passwordForCommand) : ''}
       ${this._overlayType === 'delete' ? this._renderDeleteOverlay(state.providerId, state.passwordForCommand) : ''}
     `;
   }
 
   /**
    * @param {AddonBackupsStateLoaded | AddonBackupsStateLoading} state
+   * @param {boolean} isBlurred
    * @private
    */
-  _renderBackups(state) {
+  _renderBackups(state, isBlurred) {
     const skeleton = state.type === 'loading';
     const areBtnsDisabled = state.type === 'loading' || this._overlayType != null;
 
     const data = state.type === 'loaded' ? state : SKELETON_BACKUPS;
     return html`
-      <div class="backup-list">
+      <div slot="content" class="backup-list ${classMap({ blurred: isBlurred })}">
         ${data.backups.map(
           (backup) => html`
             <div class="backup">
@@ -352,42 +359,41 @@ export class CcAddonBackups extends LitElement {
   _renderRestoreOverlay(providerId, passwordForCommand) {
     return html`
       <!-- The restore and delete overlays are quite similar but's it's easier to read with a big if and some copy/paste than 8 ifs -->
-      <div slot="overlay">
-        <cc-block class="overlay">
-          <div slot="title">${i18n('cc-addon-backups.restore', this._selectedBackup)}</div>
+      <cc-block slot="content" class="overlay">
+        <div slot="header-title">${i18n('cc-addon-backups.restore', this._selectedBackup)}</div>
+        <div slot="header-right">
           <cc-button
             class="overlay-close-btn"
-            slot="button"
             .icon=${iconClose}
             hide-text
             outlined
             primary
             @cc-button:click=${this._onCloseOverlay}
             >${i18n('cc-addon-backups.close-btn')}</cc-button
           >
+        </div>
+
+        ${this._displaySectionWithService(providerId)
+          ? html`
+              <cc-block-section slot="content">
+                <div slot="title">${this._getRestoreWithServiceTitle(providerId)}</div>
+                <div>${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}</div>
+              </cc-block-section>
+            `
+          : ''}
 
-          ${this._displaySectionWithService(providerId)
+        <cc-block-section slot="content">
+          <div slot="title">${i18n('cc-addon-backups.restore.manual.title')}</div>
+          <div>${this._getManualRestoreDescription(providerId)}</div>
+          ${this._selectedBackup.restoreCommand != null
             ? html`
-                <cc-block-section>
-                  <div slot="title">${this._getRestoreWithServiceTitle(providerId)}</div>
-                  <div>${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}</div>
-                </cc-block-section>
+                <cc-input-text readonly clipboard value="${this._selectedBackup.restoreCommand}"></cc-input-text>
+                <div>${i18n('cc-addon-backups.command-password')}</div>
+                <cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
               `
             : ''}
-
-          <cc-block-section>
-            <div slot="title">${i18n('cc-addon-backups.restore.manual.title')}</div>
-            <div>${this._getManualRestoreDescription(providerId)}</div>
-            ${this._selectedBackup.restoreCommand != null
-              ? html`
-                  <cc-input-text readonly clipboard value="${this._selectedBackup.restoreCommand}"></cc-input-text>
-                  <div>${i18n('cc-addon-backups.command-password')}</div>
-                  <cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
-                `
-              : ''}
-          </cc-block-section>
-        </cc-block>
-      </div>
+        </cc-block-section>
+      </cc-block>
     `;
   }
 
@@ -399,42 +405,41 @@ export class CcAddonBackups extends LitElement {
    */
   _renderDeleteOverlay(providerId, passwordForCommand) {
     return html`
-      <div slot="overlay">
-        <cc-block class="overlay">
-          <div slot="title">${i18n('cc-addon-backups.delete', this._selectedBackup)}</div>
+      <cc-block slot="content" class="overlay">
+        <div slot="header-title">${i18n('cc-addon-backups.delete', this._selectedBackup)}</div>
+        <div slot="header-right">
           <cc-button
             class="overlay-close-btn"
-            slot="button"
             .icon=${iconClose}
             hide-text
             outlined
             primary
             @cc-button:click=${this._onCloseOverlay}
             >${i18n('cc-addon-backups.close-btn')}</cc-button
           >
+        </div>
+
+        ${this._displaySectionWithService(providerId)
+          ? html`
+              <cc-block-section slot="content">
+                <div slot="title">${i18n('cc-addon-backups.delete.with-service.title.es-addon')}</div>
+                <div>
+                  ${i18n('cc-addon-backups.delete.with-service.description.es-addon', {
+                    href: this._selectedBackup.url,
+                  })}
+                </div>
+              </cc-block-section>
+            `
+          : ''}
 
-          ${this._displaySectionWithService(providerId)
-            ? html`
-                <cc-block-section>
-                  <div slot="title">${i18n('cc-addon-backups.delete.with-service.title.es-addon')}</div>
-                  <div>
-                    ${i18n('cc-addon-backups.delete.with-service.description.es-addon', {
-                      href: this._selectedBackup.url,
-                    })}
-                  </div>
-                </cc-block-section>
-              `
-            : ''}
-
-          <cc-block-section>
-            <div slot="title">${i18n('cc-addon-backups.delete.manual.title')}</div>
-            <div>${this._getManualDeleteDescription(providerId)}</div>
-            <cc-input-text readonly clipboard value="${this._selectedBackup.deleteCommand}"></cc-input-text>
-            <div>${i18n('cc-addon-backups.command-password')}</div>
-            <cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
-          </cc-block-section>
-        </cc-block>
-      </div>
+        <cc-block-section slot="content">
+          <div slot="title">${i18n('cc-addon-backups.delete.manual.title')}</div>
+          <div>${this._getManualDeleteDescription(providerId)}</div>
+          <cc-input-text readonly clipboard value="${this._selectedBackup.deleteCommand}"></cc-input-text>
+          <div>${i18n('cc-addon-backups.command-password')}</div>
+          <cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
+        </cc-block-section>
+      </cc-block>
     `;
   }
 
@@ -445,8 +450,7 @@ export class CcAddonBackups extends LitElement {
       // language=CSS
       css`
         :host {
-          display: grid;
-          grid-gap: 1em;
+          display: block;
           line-height: 1.5;
         }
 
@@ -489,15 +493,22 @@ export class CcAddonBackups extends LitElement {
 
         .overlay {
           box-shadow: 0 0 1em rgb(0 0 0 / 40%);
-          margin: 2em;
+          left: 50%;
           max-width: 50em;
+          padding-inline: 0;
           position: fixed;
+          transform: translateX(-50%);
+          width: 90%;
         }
 
         .overlay-close-btn {
           --cc-icon-size: 1.4em;
         }
 
+        .blurred {
+          filter: blur(5px);
+        }
+
         .cc-link,
         cc-button[link] {
           margin-right: 0.5em;
@@ -507,6 +518,11 @@ export class CcAddonBackups extends LitElement {
         cc-input-text {
           --cc-input-font-family: var(--cc-ff-monospace, monospace);
         }
+
+        .empty-msg {
+          color: var(--cc-color-text-weak);
+          font-style: italic;
+        }
       `,
     ];
   }

src/components/cc-addon-credentials/cc-addon-credentials.js

@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { dispatchCustomEvent } from '../../lib/events.js';
 import { skeletonStyles } from '../../styles/skeleton.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-block/cc-block.js';
@@ -8,7 +9,7 @@ import '../cc-notice/cc-notice.js';
 
 /**
  * @typedef {import('./cc-addon-credentials.types.js').Credential} Credential
- * @typedef {import('../common.types.js').ToggleStateType} ToggleStateType
+ * @typedef {import('../cc-block/cc-block.types.js').BlockToggleState} BlockToggleState
  * @typedef {import('./cc-addon-credentials.types.js').AddonType} AddonType
  */
 
@@ -20,6 +21,8 @@ import '../cc-notice/cc-notice.js';
  * * When the `value` of a credential is nullish, a skeleton UI pattern is displayed (loading hint).
  *
  * @cssdisplay block
+ *
+ * @fires {CustomEvent<'open'|'close'>} cc-addon-credentials:toggle-change - Fires toggle state whenever it changes.
  */
 export class CcAddonCredentials extends LitElement {
   static get properties() {
@@ -28,7 +31,7 @@ export class CcAddonCredentials extends LitElement {
       error: { type: Boolean },
       image: { type: String },
       name: { type: String },
-      toggleState: { type: Boolean, attribute: 'toggle-state' },
+      toggle: { type: String },
       type: { type: String },
     };
   }
@@ -48,8 +51,8 @@ export class CcAddonCredentials extends LitElement {
     /** @type {string|null} Sets the display name of the add-on. */
     this.name = null;
 
-    /** @type {ToggleStateType} Sets the toggle state of the inner block. */
-    this.toggleState = 'off';
+    /** @type {BlockToggleState} Sets the toggle state of the inner block. */
+    this.toggle = 'off';
 
     /** @type {AddonType}  Sets the type of the add-on. */
     this.type = null;
@@ -89,18 +92,28 @@ export class CcAddonCredentials extends LitElement {
     }
   }
 
+  /** @param {CustomEvent<'open'|'close'>} event */
+  _onToggleChange({ detail: value }) {
+    this.toggle = value;
+    dispatchCustomEvent(this, 'toggle-change', this.toggle);
+  }
+
   render() {
     return html`
-      <cc-block image=${ifDefined(this.image ?? undefined)} state=${this.toggleState}>
-        <div slot="title">${i18n('cc-addon-credentials.title', { name: this.name })}</div>
+      <cc-block
+        image=${ifDefined(this.image ?? undefined)}
+        toggle=${this.toggle}
+        @cc-block:toggle-change=${this._onToggleChange}
+      >
+        <div slot="header-title">${i18n('cc-addon-credentials.title', { name: this.name })}</div>
 
         ${!this.error
           ? html`
-              <div>${this._getDescription(this.type)}</div>
+              <div slot="content">${this._getDescription(this.type)}</div>
 
               ${this.credentials != null
                 ? html`
-                    <div class="credential-list">
+                    <div slot="content" class="credential-list">
                       ${this.credentials.map(
                         ({ type, secret, value }) => html`
                           <cc-input-text
@@ -119,7 +132,13 @@ export class CcAddonCredentials extends LitElement {
             `
           : ''}
         ${this.error
-          ? html` <cc-notice intent="warning" message="${i18n('cc-addon-credentials.loading-error')}"></cc-notice> `
+          ? html`
+              <cc-notice
+                slot="content"
+                intent="warning"
+                message="${i18n('cc-addon-credentials.loading-error')}"
+              ></cc-notice>
+            `
           : ''}
       </cc-block>
     `;