@kubex/zinc 1.0.118 → 1.1.0

package/src/components/content-block/content-block.scss

@@ -1,62 +1,94 @@
 @use "../../wc";
 
 :host {
+  display: block;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
+  padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
+
   *, *::before, *::after {
     box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: rgb(var(--zn-border-color));
   }
 }
 
-zn-header div[slot='actions'] {
+.content-block-header {
   display: flex;
   align-items: center;
   gap: 10px;
+  width: 100%;
+  max-width: 100%;
+  padding: var(--zn-base-gap) 0;
+  position: relative;
 }
 
-.content-block--collapsible {
-  zn-header::part(base) {
-    cursor: pointer;
-  }
+.content-block--collapsible .content-block-header {
+  cursor: pointer;
+}
+
+.content-block-header__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-zn-header::part(header-left) {
+.content-block-header__main {
+  display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
+  min-width: 0;
+  flex-grow: 1;
+  overflow: hidden;
 }
 
-zn-navbar {
-  cursor: default;
+.content-block-header__caption {
+  font-weight: var(--zn-text-h1-font-weight);
+  font-size: var(--zn-text-h1-font-size);
+  color: rgba(var(--zn-text-panel-title), 100%);
+  line-height: var(--zn-icon-size, 20px);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  flex-shrink: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.content-block--short {
-  zn-sp, zn-navbar {
-    display: none;
-  }
-
-  zn-header::part(base) {
-    border-bottom: none;
-  }
+.content-block-header__description {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--zn-font-size-medium);
+  color: rgb(var(--zn-text-muted));
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: none;
 }
 
-zn-panel.content-block--short::part(mid) {
-  display: none;
+.content-block-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
-zn-panel.content-block--short zn-header::part(header-description) {
-  @include wc.container-query(null, ph) {
+.content-block--short {
+  zn-sp {
     display: none;
   }
-}
 
-zn-panel:not(.content-block--short) zn-header::part(header-description) {
-  display: none;
+  .content-block-header__description {
+    display: block;
+
+    @include wc.container-query(null, ph) {
+      display: none;
+    }
+  }
 }
 
 .text-section {
@@ -94,7 +126,6 @@ li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
 
 li {
   list-style-type: none;
-  padding-left: 1em;
   position: relative;
 }
 

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

@@ -17,6 +17,9 @@ table {
   max-width: 100%;
   table-layout: auto;
   text-align: left;
+  font-size: var(--zn-text-table-content-font-size);
+  line-height: var(--zn-text-table-content-line-height);
+  font-weight: var(--zn-text-table-content-font-weight);
 
   tbody tr:nth-of-type(even) {
     background-color: unset;
@@ -32,14 +35,14 @@ table {
 
   &.table--standalone {
     background-color: rgb(var(--zn-panel));
-    border-radius: var(--zn-border-radius-large);
+    border-radius: var(--zn-border-radius);
     border: 1px solid rgb(var(--zn-border-color));
     overflow: hidden;
   }
 
   thead {
     color: rgb(var(--zn-text-heading));
-    font-weight: 500;
+    font-weight: var(--zn-font-weight-medium);
   }
 
   thead tr th {
@@ -229,9 +232,9 @@ table {
       }
 
       .title {
-        font-weight: 600;
+        font-weight: var(--zn-font-weight-semibold);
         color: rgb(var(--zn-text-heading));
-        font-size: 14px;
+        font-size: var(--zn-text-table-content-font-size);
         text-decoration: none;
       }
 
@@ -349,7 +352,7 @@ table {
     }
 
     &__value {
-      font-size: 14px;
+      font-size: var(--zn-text-table-content-font-size);
     }
   }
 }
@@ -399,11 +402,11 @@ table tbody tr.table__row--selected {
   }
 
   &:last-of-type td:first-of-type {
-    border-bottom-left-radius: var(--zn-border-radius-large);
+    border-bottom-left-radius: var(--zn-border-radius);
   }
 
   &:last-of-type td:last-of-type {
-    border-bottom-right-radius: var(--zn-border-radius-large);
+    border-bottom-right-radius: var(--zn-border-radius);
   }
 
   & + tr.table__row--selected td {

package/src/components/data-table-sort/data-table-sort.scss

@@ -9,7 +9,7 @@
   &__dropdown {
     background-color: rgb(var(--zn-panel));
     border: solid 1px rgb(var(--zn-border-color));
-    border-radius: var(--zn-border-radius-large);
+    border-radius: var(--zn-border-radius);
     box-shadow: var(--zn-shadow-large);
     padding: var(--zn-spacing-medium);
     width: 300px;

package/src/components/dialog/dialog.component.ts

@@ -229,10 +229,10 @@ export default class ZnDialog extends ZincElement {
                   part="close-button"
                   exportparts="base:close-button__base"
                   class="dialog__close"
-                  icon="close"
+                  icon="x@lu"
                   icon-size="24"
-                  type="button"
-                  color="transparent"
+                  icon-button="small"
+                  plain
                   @click="${() => this.requestClose('close-button')}"
                 ></zn-button>
               </div>

package/src/components/dialog/dialog.scss

@@ -13,7 +13,7 @@
 }
 
 .dialog-container {
-  border-radius: var(--zn-border-radius-x-large);
+  border-radius: var(--zn-border-radius);
   background-color: var(--zn-panel-background-color);
   margin: 2px;
   overflow: auto;
@@ -31,7 +31,7 @@
   max-width: calc(100% - var(--zn-spacing-2x-large));
   max-height: calc(100% - var(--zn-spacing-2x-large));
   background-color: var(--zn-panel-background-color);
-  border-radius: var(--zn-border-radius-x-large);
+  border-radius: var(--zn-border-radius);
   box-shadow: var(--zn-shadow-x-large);
   padding: 0;
   margin: 10vh auto;

package/src/components/dropdown/dropdown.component.ts

@@ -349,6 +349,7 @@ export default class ZnDropdown extends ZincElement {
         exportparts="popup:base__popup"
         id="dropdown"
         placement=${this.placement}
+        distance=${this.distance}
         skidding=${this.skidding}
         strategy=${this.hoist ? 'fixed' : 'absolute'}
         flip

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

@@ -423,7 +423,9 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     if (!target.hasAttribute('editor-mode')) return;
 
     const editorMode = target.getAttribute('editor-mode');
-    if (!editorMode) return;
+    if (editorMode !== 'replace' && editorMode !== 'insert') return;
+
+    e.preventDefault();
 
     const contentContainer = target.getAttribute('editor-content-id');
     if (!contentContainer) return;

package/src/components/editor/editor.scss

@@ -3,8 +3,13 @@
 @use "../../../node_modules/quill/dist/quill.snow.css" as snow;
 @use "../../wc";
 
+@include wc.gutter;
+
 :host, zn-editor {
+  --editor-gutter: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
+
   width: 100%;
+  padding-inline: var(--editor-gutter);
 }
 
 :host {
@@ -13,6 +18,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 170px;
+  container-type: inline-size;
 
   display: flex;
   flex-direction: column;
@@ -62,7 +68,7 @@
     color: rgb(var(--zn-text));
     background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
     font-size: 15px;
-    padding: 0 var(--zn-spacing-medium);
+    padding-inline: var(--editor-gutter);
 
     img {
       height: auto;
@@ -84,6 +90,7 @@
   #toolbar-container, #action-container {
     justify-content: space-between;
     align-items: center;
+    padding-inline: var(--editor-gutter);
 
     .wrap {
       flex-grow: 1;
@@ -147,5 +154,5 @@
 }
 
 #toolbar {
-  padding: 4px;
+  padding-inline: var(--editor-gutter);
 }

package/src/components/editor/modules/ai/panel/ai-panel.scss

@@ -38,7 +38,7 @@
     --zn-input-border-color-hover: var(--zn-input-border-color-hover);
     --zn-input-text-color: var(--zn-input-text-color);
     --zn-input-placeholder-color: var(--zn-input-placeholder-color);
-    --zn-input-border-radius: var(--zn-border-radius-medium);
+    --zn-input-border-radius: var(--zn-border-radius);
     --zn-input-padding: 8px 12px;
     --zn-input-font-size: 14px;
 
@@ -51,7 +51,7 @@
     }
 
     &::part(textarea) {
-      border-radius: var(--zn-border-radius-medium);
+      border-radius: var(--zn-border-radius);
     }
   }
 

package/src/components/editor/modules/ai/tooltip/ai-tooltip.scss

@@ -18,7 +18,7 @@
   cursor: pointer;
   background: var(--zn-panel-background-color);
   border: 1px solid var(--zn-border-color);
-  border-radius: var(--zn-border-radius-large);
+  border-radius: var(--zn-border-radius);
   box-shadow: var(--zn-shadow-small);
 
   &[aria-selected="true"],

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

@@ -262,45 +262,45 @@ class ContextMenu {
 
     // 2) Built-in Actions (In order they should appear)
     options.push(
-      {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++},
+      {icon: 'bold@lu', label: 'Bold', format: 'bold', order: orderCounter++},
+      {icon: 'italic@lu', label: 'Italic', format: 'italic', order: orderCounter++},
+      {icon: 'underline@lu', label: 'Underline', format: 'underline', order: orderCounter++},
+      {icon: 'strikethrough@lu', label: 'Strikethrough', format: 'strike', order: orderCounter++},
+      {icon: 'text-quote@lu', label: 'Blockquote', format: 'blockquote', order: orderCounter++},
     );
     if (this._featureConfig.codeEnabled !== false) {
-      options.push({icon: 'code', label: 'Inline Code', format: 'code', order: orderCounter++});
+      options.push({icon: 'code@lu', 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: 'square-code@lu', 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++}
+      {icon: 'heading-1@lu', label: 'Heading 1', format: 'header', value: '1', order: orderCounter++},
+      {icon: 'heading-2@lu', label: 'Heading 2', format: 'header', value: '2', order: orderCounter++},
+      {icon: 'case-sensitive@lu', label: 'Normal Text', format: 'header', value: '', order: orderCounter++},
+      {icon: 'list@lu', label: 'Bulleted List', format: 'list', value: 'bullet', order: orderCounter++},
+      {icon: 'list-ordered@lu', label: 'Numbered List', format: 'list', value: 'ordered', order: orderCounter++},
+      {icon: 'list-todo@lu', 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++});
+      options.push({icon: 'link@lu', label: 'Link', format: 'link', value: true, order: orderCounter++});
     }
     if (this._featureConfig.dividersEnabled !== false) {
-      options.push({icon: 'horizontal_rule', label: 'Divider', format: 'divider', order: orderCounter++});
+      options.push({icon: 'minus@lu', label: 'Divider', format: 'divider', order: orderCounter++});
     }
     if (this._featureConfig.attachmentsEnabled !== false) {
-      options.push({icon: 'attachment', label: 'Attachment', format: 'attachment', order: orderCounter++});
+      options.push({icon: 'paperclip@lu', label: 'Attachment', format: 'attachment', order: orderCounter++});
     }
     if (this._featureConfig.imagesEnabled !== false) {
-      options.push({icon: 'image', label: 'Image', format: 'image', order: orderCounter++});
+      options.push({icon: 'image@lu', label: 'Image', format: 'image', order: orderCounter++});
     }
     if (this._featureConfig.videosEnabled !== false) {
-      options.push({icon: 'video_camera_back', label: 'Video', format: 'video', order: orderCounter++});
+      options.push({icon: 'video@lu', 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: 'calendar@lu', label: 'Date', format: 'date', order: orderCounter++});
     }
-    options.push({icon: 'format_clear', label: 'Clear Formatting', format: 'clean', order: orderCounter++});
+    options.push({icon: 'remove-formatting@lu', label: 'Clear Formatting', format: 'clean', order: orderCounter++});
 
     // Sort options by order property
     options.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));

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

@@ -32,13 +32,12 @@ export default class DialogComponent extends ZincElement {
 
     this.dialogEl.addEventListener("close", () => {
       this.open = false;
+      this.innerHTML = '';
     });
   }
 
   setContent(content: string) {
-    if (this.dialogEl) {
-      this.dialogEl.querySelector('.editor-dialog__content')!.innerHTML = content;
-    }
+    this.innerHTML = content;
   }
 
   @watch('open', {waitUntilFirstUpdate: true})
@@ -104,7 +103,7 @@ export default class DialogComponent extends ZincElement {
           @click="${() => this.dialogEl.close()}"
         ></zn-button>
         <div class="editor-dialog__content">
-          ${this._getLoadingState()}
+          <slot>${this._getLoadingState()}</slot>
         </div>
       </dialog>
     `;

package/src/components/editor/modules/dialog/dialog.scss

@@ -14,7 +14,7 @@
 .editor-dialog {
   background-color: rgb(var(--zn-panel));
   border: 1px solid rgb(var(--zn-border-color));
-  border-radius: var(--zn-border-radius-large);
+  border-radius: var(--zn-border-radius);
   width: 100%;
   max-width: 975px;
   max-height: 650px;
@@ -37,6 +37,7 @@
   }
 
   &__content {
+    min-height: min(500px, 70vh);
     overflow: auto;
     box-sizing: border-box;
   }

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

@@ -17,17 +17,21 @@ class Dialog {
   }
 
   private _initDialog() {
-    const existing = this._document.querySelector<DialogComponent>('zn-editor-dialog');
-    if (existing) {
-      this._component = existing;
-    } else {
-      this._component = this.createComponent()!;
-      this._document.body.appendChild(this._component);
-    }
-
+    this._component = this.createComponent()!;
+    this._mountPoint().appendChild(this._component);
     this._component.editorId = this._editorId;
   }
 
+  public get component(): DialogComponent {
+    return this._component;
+  }
+
+  private _mountPoint(): HTMLElement {
+    const root = this._quill.container.getRootNode();
+    const host = root instanceof ShadowRoot ? (root.host as HTMLElement) : null;
+    return host?.parentElement ?? this._document.body;
+  }
+
   private createComponent() {
     const tpl = html`
       <zn-editor-dialog></zn-editor-dialog>`;

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

@@ -1,12 +1,8 @@
-import {type CSSResultGroup, html, unsafeCSS} from "lit";
+import {html} from "lit";
 import {property} from "lit/decorators.js";
 import ZincElement from "../../../../../internal/zinc-element";
 
-import styles from './tool.scss';
-
 export default class ZnEditorTool extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
-
   @property() uri: string;
   @property() label: string;
   @property() key: string;