@kubex/zinc 1.0.8 → 1.0.10

package/src/components/editor/modules/context-menu/context-menu.ts

@@ -4,6 +4,7 @@ import {litToHTML} from "../../../../utilities/lit-to-html";
 import {type ResultItem} from "./context-menu-component";
 import Quill, {Delta} from "quill";
 import ZnEditorQuickAction from "./quick-action";
+import type {EditorFeatureConfig} from "../../editor.component";
 import type ContextMenuComponent from "./context-menu-component";
 import type Toolbar from "../toolbar/toolbar";
 
@@ -14,10 +15,12 @@ class ContextMenu {
   private _startIndex = -1;
   private _keydownHandler = (e: KeyboardEvent) => this.onKeydown(e);
   private _docClickHandler = (e: MouseEvent) => this.onDocumentClick(e);
+  private _featureConfig: EditorFeatureConfig = {};
 
-  constructor(quill: Quill) {
+  constructor(quill: Quill, options: { config: EditorFeatureConfig }) {
     this._quill = quill;
     this._toolbarModule = quill.getModule('toolbar') as Toolbar;
+    this._featureConfig = options.config || {};
 
     this.initComponent();
     this.attachEvents();
@@ -199,7 +202,7 @@ class ContextMenu {
           Quill.sources.USER
         );
 
-        setTimeout(() => this._quill.setSelection(insertIndex + contentDelta.length(), 0, Quill.sources.SILENT), 0);
+        setTimeout(() => this._quill.setSelection(insertIndex + contentDelta.length() + 1, 0, Quill.sources.SILENT), 0);
       }
       this._quill.focus();
       this.hide();
@@ -225,6 +228,7 @@ class ContextMenu {
 
   private _getOptions(): ResultItem[] {
     const options: ResultItem[] = [];
+    let orderCounter = 0;
 
     // 1) Quick Actions
     const root = this._quill.container.getRootNode() as ShadowRoot;
@@ -236,41 +240,69 @@ class ContextMenu {
 
         const {label, content, uri, icon, key} = quickAction;
 
+        let order: number;
+        if (typeof quickAction.order === 'number') {
+          order = quickAction.order!;
+        } else {
+          order = orderCounter++;
+        }
+
         if (label && icon) {
           if (key) {
-            options.push({icon, label, format: 'toolbar', key: key});
+            options.push({icon, label, format: 'toolbar', key: key, order});
           } else if (uri) {
-            options.push({icon, label, format: 'dialog', value: uri});
+            options.push({icon, label, format: 'dialog', value: uri, order});
           } else if (content) {
-            options.push({icon, label, format: 'insert', value: content});
+            options.push({icon, label, format: 'insert', value: content, order});
           }
         }
       });
     }
 
-    // 2) Built-in Actions
+    // 2) Built-in Actions (In order they should appear)
     options.push(
-      {icon: 'format_bold', label: 'Bold', format: 'bold'},
-      {icon: 'format_italic', label: 'Italic', format: 'italic'},
-      {icon: 'format_underlined', label: 'Underline', format: 'underline'},
-      {icon: 'strikethrough_s', label: 'Strikethrough', format: 'strike'},
-      {icon: 'format_quote', label: 'Blockquote', format: 'blockquote'},
-      {icon: 'code', label: 'Inline Code', format: 'code'},
-      {icon: 'code_blocks', label: 'Code Block', format: 'code-block'},
-      {icon: 'format_h1', label: 'Heading 1', format: 'header', value: '1'},
-      {icon: 'format_h2', label: 'Heading 2', format: 'header', value: '2'},
-      {icon: 'match_case', label: 'Normal Text', format: 'header', value: ''},
-      {icon: 'format_list_bulleted', label: 'Bulleted List', format: 'list', value: 'bullet'},
-      {icon: 'format_list_numbered', label: 'Numbered List', format: 'list', value: 'ordered'},
-      {icon: 'checklist', label: 'Checklist', format: 'list', value: 'checked'},
-      {icon: 'link', label: 'Link', format: 'link', value: true},
-      {icon: 'horizontal_rule', label: 'Divider', format: 'divider'},
-      {icon: 'attachment', label: 'Attachment', format: 'attachment'},
-      {icon: 'image', label: 'Image', format: 'image'},
-      {icon: 'video_camera_back', label: 'Video', format: 'video'},
-      {icon: 'calendar_today', label: 'Date', format: 'date'},
-      {icon: 'format_clear', label: 'Clear Formatting', format: 'clean'}
+      {icon: 'format_bold', label: 'Bold', format: 'bold', order: orderCounter++},
+      {icon: 'format_italic', label: 'Italic', format: 'italic', order: orderCounter++},
+      {icon: 'format_underlined', label: 'Underline', format: 'underline', order: orderCounter++},
+      {icon: 'strikethrough_s', label: 'Strikethrough', format: 'strike', order: orderCounter++},
+      {icon: 'format_quote', label: 'Blockquote', format: 'blockquote', order: orderCounter++},
     );
+    if (this._featureConfig.codeEnabled !== false) {
+      options.push({icon: 'code', label: 'Inline Code', format: 'code', order: orderCounter++});
+    }
+    if (this._featureConfig.codeBlocksEnabled !== false) {
+      options.push({icon: 'code_blocks', label: 'Code Block', format: 'code-block', order: orderCounter++});
+    }
+    options.push(
+      {icon: 'format_h1', label: 'Heading 1', format: 'header', value: '1', order: orderCounter++},
+      {icon: 'format_h2', label: 'Heading 2', format: 'header', value: '2', order: orderCounter++},
+      {icon: 'match_case', label: 'Normal Text', format: 'header', value: '', order: orderCounter++},
+      {icon: 'format_list_bulleted', label: 'Bulleted List', format: 'list', value: 'bullet', order: orderCounter++},
+      {icon: 'format_list_numbered', label: 'Numbered List', format: 'list', value: 'ordered', order: orderCounter++},
+      {icon: 'checklist', label: 'Checklist', format: 'list', value: 'checked', order: orderCounter++}
+    );
+    if (this._featureConfig.linksEnabled !== false) {
+      options.push({icon: 'link', label: 'Link', format: 'link', value: true, order: orderCounter++});
+    }
+    if (this._featureConfig.dividersEnabled !== false) {
+      options.push({icon: 'horizontal_rule', label: 'Divider', format: 'divider', order: orderCounter++});
+    }
+    if (this._featureConfig.attachmentsEnabled !== false) {
+      options.push({icon: 'attachment', label: 'Attachment', format: 'attachment', order: orderCounter++});
+    }
+    if (this._featureConfig.imagesEnabled !== false) {
+      options.push({icon: 'image', label: 'Image', format: 'image', order: orderCounter++});
+    }
+    if (this._featureConfig.videosEnabled !== false) {
+      options.push({icon: 'video_camera_back', label: 'Video', format: 'video', order: orderCounter++});
+    }
+    if (this._featureConfig.datesEnabled !== false) {
+      options.push({icon: 'calendar_today', label: 'Date', format: 'date', order: orderCounter++});
+    }
+    options.push({icon: 'format_clear', label: 'Clear Formatting', format: 'clean', order: orderCounter++});
+
+    // Sort options by order property
+    options.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 
     return options;
   }

package/src/components/editor/modules/context-menu/quick-action/quick-action.component.ts

@@ -8,6 +8,7 @@ export default class ZnEditorQuickAction extends ZincElement {
   @property() content: string;
   @property() key: string;
   @property() icon: string;
+  @property({type: Number}) order?: number | null;
 
   render() {
     return html`

package/src/components/editor/modules/toolbar/toolbar.component.ts

@@ -6,6 +6,7 @@ import ZnButton from "../../../button";
 import ZnEditorTool from "./tool";
 import ZnMenu from "../../../menu";
 import ZnMenuItem from "../../../menu-item";
+import type {EditorFeatureConfig} from "../../editor.component";
 
 import styles from './toolbar.scss';
 
@@ -22,6 +23,7 @@ export default class ToolbarComponent extends ZincElement {
   @query('.toolbar__overflow-menu') private _overflowMenu!: HTMLElement;
   @query('.toolbar__group--overflow') private _overflowGroup!: HTMLElement;
 
+  private _featureConfig: EditorFeatureConfig = {};
   private _resizeObserver: ResizeObserver | null = null;
   private _resizeId: number | null = null;
 
@@ -78,6 +80,10 @@ export default class ToolbarComponent extends ZincElement {
     });
   }
 
+  public configureToolbar(config: EditorFeatureConfig) {
+    this._featureConfig = config;
+  }
+
   private getToolbarWidth() {
     const host = this as unknown as HTMLElement;
     let width = host.getBoundingClientRect?.().width || host.offsetWidth || 0;
@@ -456,6 +462,13 @@ export default class ToolbarComponent extends ZincElement {
   }
 
   render() {
+    const showInsertOptions = this._featureConfig.dividersEnabled ||
+      this._featureConfig.linksEnabled ||
+      this._featureConfig.attachmentsEnabled ||
+      this._featureConfig.imagesEnabled ||
+      this._featureConfig.videosEnabled;
+    const showInsertGroup = showInsertOptions || this._featureConfig.datesEnabled || this._featureConfig.emojisEnabled;
+
     return html`
       <div class="toolbar">
         <div class="toolbar__group">${this._textOptions()}</div>
@@ -463,11 +476,12 @@ export default class ToolbarComponent extends ZincElement {
         <div class="toolbar__group">${this._historyOptions()}</div>
         <div class="toolbar__group">${this._colorOptions()}</div>
         <div class="toolbar__group">${this._listOptions()}</div>
-        <div class="toolbar__group">
-          ${this._insertOptions()}
-          ${this._dateOption()}
-          ${this._emojiOptions()}
-        </div>
+        ${showInsertGroup ? html`
+          <div class="toolbar__group">
+            ${showInsertOptions ? html`${this._insertOptions()}` : ''}
+            ${this._featureConfig.datesEnabled ? html`${this._dateOption()}` : ''}
+            ${this._featureConfig.emojisEnabled ? html`${this._emojiOptions()}` : ''}
+          </div>` : ''}
         <div class="toolbar__group">
           <slot></slot>
         </div>
@@ -550,14 +564,18 @@ export default class ToolbarComponent extends ZincElement {
             <zn-icon src="format_quote" size="18" slot="prefix"></zn-icon>
             Quote
           </zn-menu-item>
-          <zn-menu-item type="checkbox" checked-position="right" data-format="code">
-            <zn-icon src="code" size="18" slot="prefix"></zn-icon>
-            Code
-          </zn-menu-item>
-          <zn-menu-item type="checkbox" checked-position="right" data-format="code-block">
-            <zn-icon src="code_blocks" size="18" slot="prefix"></zn-icon>
-            Code Block
-          </zn-menu-item>
+          ${this._featureConfig.codeEnabled ? html`
+            <zn-menu-item type="checkbox" checked-position="right" data-format="code">
+              <zn-icon src="code" size="18" slot="prefix"></zn-icon>
+              Code
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.codeBlocksEnabled ? html`
+            <zn-menu-item type="checkbox" checked-position="right" data-format="code-block">
+              <zn-icon src="code_blocks" size="18" slot="prefix"></zn-icon>
+              Code Block
+            </zn-menu-item>
+          ` : ''}
           <zn-menu-item data-format="clean">
             <zn-icon src="format_clear" size="18" slot="prefix"></zn-icon>
             Clear Formatting
@@ -680,26 +698,36 @@ export default class ToolbarComponent extends ZincElement {
           <zn-icon src="add" size="18"></zn-icon>
         </zn-button>
         <zn-menu>
-          <zn-menu-item checked-position="right" data-format="divider">
-            <zn-icon src="horizontal_rule" size="18" slot="prefix"></zn-icon>
-            Divider
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="link">
-            <zn-icon src="link" size="18" slot="prefix"></zn-icon>
-            Link
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="attachment">
-            <zn-icon src="attachment" size="18" slot="prefix"></zn-icon>
-            Attachment
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="image">
-            <zn-icon src="image" size="18" slot="prefix"></zn-icon>
-            Image
-          </zn-menu-item>
-          <zn-menu-item checked-position="right" data-format="video">
-            <zn-icon src="video_camera_back" size="18" slot="prefix"></zn-icon>
-            Video
-          </zn-menu-item>
+          ${this._featureConfig.dividersEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="divider">
+              <zn-icon src="horizontal_rule" size="18" slot="prefix"></zn-icon>
+              Divider
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.linksEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="link">
+              <zn-icon src="link" size="18" slot="prefix"></zn-icon>
+              Link
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.attachmentsEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="attachment">
+              <zn-icon src="attachment" size="18" slot="prefix"></zn-icon>
+              Attachment
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.imagesEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="image">
+              <zn-icon src="image" size="18" slot="prefix"></zn-icon>
+              Image
+            </zn-menu-item>
+          ` : ''}
+          ${this._featureConfig.videosEnabled ? html`
+            <zn-menu-item checked-position="right" data-format="video">
+              <zn-icon src="video_camera_back" size="18" slot="prefix"></zn-icon>
+              Video
+            </zn-menu-item>
+          ` : ''}
         </zn-menu>
       </zn-dropdown>`;
   }

package/src/components/editor/modules/toolbar/toolbar.ts

@@ -1,6 +1,7 @@
 import './toolbar.component';
 import Quill from "quill";
 import QuillToolbar from "quill/modules/toolbar";
+import type {EditorFeatureConfig} from "../../editor.component";
 import type Attachment from "../attachment/attachment";
 import type DialogComponent from "../dialog/dialog.component";
 import type Emoji from "../emoji/emoji";
@@ -17,20 +18,34 @@ class Toolbar extends QuillToolbar {
   constructor(quill: Quill, options: {
     container: ToolbarComponent;
     handlers?: Record<string, (value?: any) => void>;
+    config?: EditorFeatureConfig;
   }) {
     super(quill, options);
 
+    const featureConfig = options.config;
+
     // Add handlers after parent Toolbar initialization
-    this.addHandler('attachment', () => null);
-    this.addHandler('date', () => this._openDatePicker());
-    this.addHandler('divider', () => this._insertDivider());
+    if (featureConfig?.attachmentsEnabled) {
+      this.addHandler('attachment', () => null);
+    }
+    if (featureConfig?.datesEnabled) {
+      this.addHandler('date', () => this._openDatePicker());
+    }
+    if (featureConfig?.dividersEnabled) {
+      this.addHandler('divider', () => this._insertDivider());
+    }
+    if (featureConfig?.imagesEnabled) {
+      this.addHandler('image', () => this._addImage());
+    }
     this.addHandler('redo', () => quill.history.redo());
     this.addHandler('undo', () => quill.history.undo());
     this.addHandler('dialog', (value: string) => this._openDialog(value));
-    this.addHandler('image', () => this._addImage());
 
     this._quill = quill;
     this._component = options.container;
+    if (featureConfig) {
+      this._component.configureToolbar(featureConfig)
+    }
 
     this._component.updateComplete.then(() => {
       this._attachToolbarHandlers();

package/src/components/header/header.scss

@@ -233,6 +233,7 @@
     align-items: center;
     flex-wrap: wrap;
     gap: var(--zn-spacing-x-small);
+    word-break: break-word;
   }
 
   slot[name="nav"] {

package/src/components/menu/menu.component.ts

@@ -112,7 +112,8 @@ export default class ZnMenu extends ZincElement {
                           action="${item.confirm?.action}"></zn-confirm>
               <zn-menu-item @mousedown=${this.handleMouseDown}
                             @keydown=${this.handleKeyDown}
-                            id="${item.confirm?.trigger}">
+                            id="${item.confirm?.trigger}"
+                            confirm>
                 ${(item.icon) ? html`
                   <zn-icon src="${item.icon}" size="20" slot="prefix"></zn-icon>` : html``}
                 ${item.title}

package/src/components/menu-item/menu-item.component.ts

@@ -76,6 +76,8 @@ export default class ZnMenuItem extends ZincElement {
 
   @property({attribute: 'gaid'}) gaid: string;
 
+  @property({type: Boolean, reflect: true}) confirm = false;
+
   private readonly localize = new LocalizeController(this);
   private readonly hasSlotController = new HasSlotController(this, 'submenu');
   private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
@@ -118,6 +120,8 @@ export default class ZnMenuItem extends ZincElement {
     if (!this.isSubmenu()) {
       const composedPath = event.composedPath();
       const closestMenu: Element | null = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu') as Element;
+      if (this.confirm) return;
+
       (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
       this.emit('zn-menu-select', {detail: {value: this.value, element: this}});
     }

package/src/components/note/note.component.ts

@@ -38,49 +38,26 @@ export default class ZnNote extends ZincElement {
   // Internal state: whether the body is currently expanded
   @state() private expanded = false;
 
-  // Internal state: whether the content actually overflows the clamp
-  @state() private _isOverflowing = false;
-
   private _toggleExpand = () => {
     this.expanded = !this.expanded;
-    // re-evaluate overflow after toggle (in case of dynamic content)
     this.updateComplete.then(() => this._measureOverflow());
   }
 
   private _measureOverflow() {
-    // Only relevant when collapseAtLines is set and not expanded
     const container = this.shadowRoot?.querySelector('.note__body-container') as HTMLElement | null;
-    if (!container) {
-      this._isOverflowing = false;
-      return;
-    }
-
-    if (this.collapseAtLines <= 0) {
-      this._isOverflowing = false;
+    if (!container || this.collapseAtLines <= 0) {
       return;
     }
 
-    // Temporarily ensure clamped styles are applied to measure
     container.style.setProperty('--note-collapse-lines', String(this.collapseAtLines));
     container.classList.toggle('note__body--clamped', !this.expanded);
-
-    // element starts hidden, cannot measure
-    if (container.clientHeight === 0) {
-      this._isOverflowing = false;
-      return;
-    }
-
-    // Measure overflow
-    this._isOverflowing = container.scrollHeight > container.clientHeight + 1;  // +1 for rounding errors
   }
 
   protected firstUpdated() {
-    // Initial measurement of overflow
     this._measureOverflow();
   }
 
   protected updated() {
-    // Re-measure on any update to catch slot/content changes
     this._measureOverflow();
   }
 
@@ -110,7 +87,7 @@ export default class ZnNote extends ZincElement {
         })}" style="--note-collapse-lines: ${this.collapseAtLines}">
           <slot class="note__body"></slot>
         </div>
-        ${this.collapseAtLines > 0 && this._isOverflowing ? html`
+        ${this.collapseAtLines > 0 ? html`
           <div class="note__toggle">
             <zn-button color="transparent"
                        size="content"

package/src/components/note/note.scss

@@ -51,13 +51,6 @@ $colors: (
     display: block;
   }
 
-  &__body--clamped {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--note-collapse-lines, 0);
-    overflow: hidden;
-  }
-
   &__toggle {
     margin-top: var(--zn-spacing-2x-small);
   }

package/src/components/order-table/order-table.scss

@@ -2,13 +2,16 @@
 
 
 .table {
-  display: table;
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
 
 .header {
-  display: table-header-group;
+  display: flex;
+  align-items: center;
+  width: 100%;
 }
 
 .header-item, .row-item {
@@ -32,11 +35,17 @@
   }
 
   @include wc.container-query(md) {
-    display: table-cell;
+    flex: 1;
     border-bottom: 1px solid rgb(var(--zn-border-color));
 
     &:first-child {
-      width: 50%;
+      width: 35%;
+      flex-basis: 35%;
+      align-items: flex-start;
+
+      &.row-caption {
+        text-align: left;
+      }
     }
 
     &:last-child {
@@ -66,6 +75,7 @@
   font-size: 14px;
   font-weight: 600;
   color: rgb(var(--zn-text-heading));
+  white-space: nowrap;
 }
 
 .row-caption .content {
@@ -78,10 +88,8 @@
 
 .rows {
   width: 100%;
-
-  @include wc.container-query(md) {
-    display: table-row-group;
-  }
+  display: flex;
+  flex-direction: column;
 }
 
 .row {
@@ -91,7 +99,6 @@
   width: 100%;
 
   @include wc.container-query(md) {
-    display: table-row;
     border-bottom: none;
   }
 }
@@ -111,7 +118,6 @@
   width: 100%;
 
   @include wc.container-query(md) {
-    display: table-row;
     border-bottom: none;
   }
 }

package/src/components/panel/panel.component.ts

@@ -31,12 +31,14 @@ export default class ZnPanel extends ZincElement {
   @property() icon: string;
   @property() description: string;
   @property({type: Boolean}) tabbed: boolean;
+  @property({attribute: 'header-underline', type: Boolean}) underlineHeader: boolean;
   @property({type: Boolean}) cosmic: boolean;
   @property({type: Boolean}) flush: boolean;
   @property({attribute: 'flush-x', type: Boolean}) flushX: boolean;
   @property({attribute: 'flush-y', type: Boolean}) flushY: boolean;
   @property({attribute: 'flush-footer', type: Boolean}) flushFooter: boolean;
   @property({type: Boolean}) transparent: boolean;
+  @property({type: Boolean}) shadow: boolean;
 
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
@@ -78,7 +80,7 @@ export default class ZnPanel extends ZincElement {
     const hasHeader = this.caption || hasActionSlot;
 
     return html`
-      <div part="base" class="${classMap({
+      <div class="${classMap({
         panel: true,
         'panel--flush': this.flush || this.tabbed,
         'panel--flush-x': this.flushX,
@@ -89,12 +91,16 @@ export default class ZnPanel extends ZincElement {
         'panel--has-actions': hasActionSlot,
         'panel--has-footer': hasFooterSlot,
         'panel--has-header': hasHeader,
-        'panel--cosmic': this.cosmic
+        'panel--cosmic': this.cosmic,
+        'panel--shadow': this.shadow
       })}">
 
         <div class="panel__inner">
           ${hasHeader ? html`
-            <zn-header class="panel__header"
+            <zn-header class="${classMap({
+              "panel__header": true,
+              "panel__header--underline": this.underlineHeader,
+            })}"
                        icon="${this.icon}"
                        caption="${this.caption}"
                        description="${ifDefined(this.description)}"

package/src/components/panel/panel.scss

@@ -40,6 +40,10 @@
       border-bottom: 0;
     }
 
+    &--underline {
+      border-bottom: 1px solid rgb(var(--zn-border-color));
+    }
+
     &::part(content) {
       padding: 0;
     }
@@ -136,4 +140,8 @@
   &--cosmic {
     @include wc.cosmic-border();
   }
+
+  &--shadow {
+    box-shadow: 0 6px 20px 10px rgba(0, 0, 0, 0.25);
+  }
 }

package/src/components/popup/popup.component.ts

@@ -1,22 +1,11 @@
-import {
-  arrow,
-  autoUpdate,
-  computePosition,
-  flip,
-  offset,
-  platform,
-  shift,
-  size
-} from '@floating-ui/dom';
+import {arrow, autoUpdate, computePosition, flip, offset, platform, shift, size} from '@floating-ui/dom';
 import {classMap} from 'lit/directives/class-map.js';
 import {html, unsafeCSS} from 'lit';
 import {offsetParent} from 'composed-offset-position';
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import type {CSSResultGroup} from 'lit';
-import type {
-  MiddlewareData
-} from '@floating-ui/dom';
+import type {MiddlewareData} from '@floating-ui/dom';
 
 import styles from './popup.scss';
 
@@ -210,7 +199,9 @@ export default class ZnPopup extends ZincElement {
 
     // Start the positioner after the first update
     await this.updateComplete;
-    this.start();
+    if (this.active) {
+      this.start();
+    }
   }
 
   disconnectedCallback() {
@@ -260,7 +251,7 @@ export default class ZnPopup extends ZincElement {
     }
 
     // If the anchor is valid, start it up
-    if (this.anchorEl) {
+    if (this.anchorEl && this.active) {
       this.start();
     }
   }
@@ -270,7 +261,6 @@ export default class ZnPopup extends ZincElement {
     if (!this.anchorEl) {
       return;
     }
-
     this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
       this.reposition();
     });
@@ -527,26 +517,26 @@ export default class ZnPopup extends ZincElement {
 
   render() {
     return html`
-      <slot class="anchor" name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+      <slot class="anchor" name="anchor" @slotchange="${this.handleAnchorChange}"></slot>
 
       <span
         part="hover-bridge"
-        class=${classMap({
+        class="${classMap({
           'popup-hover-bridge': true,
           'popup-hover-bridge--visible': this.hoverBridge && this.active
-        })}
+        })}"
       ></span>
 
       <div
         id="popup"
         part="popup"
         popover
-        class=${classMap({
+        class="${classMap({
           popup: true,
           'popup--active': this.active,
           'popup--fixed': this.strategy === 'fixed',
           'popup--has-arrow': this.arrow
-        })}
+        })}"
       >
         <slot></slot>
         ${this.arrow ? html`