@kubex/zinc 1.0.118 → 1.1.0

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

@@ -322,7 +322,10 @@ export default class ToolbarComponent extends ZincElement {
     const getDropdownIcon = (dropdown: HTMLElement) => {
       const triggerBtn = dropdown.querySelector('zn-button[slot="trigger"]') as ZnButton | undefined;
       const iconEl = triggerBtn?.querySelector('zn-icon') as HTMLElement | null;
-      return iconEl?.getAttribute('src');
+      const src = iconEl?.getAttribute('src');
+      if (!src) return src ?? undefined;
+      const library = iconEl?.getAttribute('library');
+      return library ? `${src}@${library}` : src;
     };
 
     const buttonLabelMap: Record<string, string> = {
@@ -366,6 +369,7 @@ export default class ToolbarComponent extends ZincElement {
         }
         const submenu = document.createElement('zn-menu');
         submenu.setAttribute('slot', 'submenu');
+        submenu.setAttribute('variant', 'shell');
 
         const items = dropdown.querySelectorAll<ZnMenuItem>('zn-menu-item');
         if (items.length) {
@@ -486,10 +490,10 @@ export default class ToolbarComponent extends ZincElement {
             <zn-button slot="trigger"
                        class="toolbar__overflow-trigger"
                        color="transparent"
-                       icon="more_horiz"
+                       icon="ellipsis@lu"
                        icon-size="18"
                        icon-position="right"></zn-button>
-            <zn-menu class="toolbar__overflow-menu"></zn-menu>
+            <zn-menu class="toolbar__overflow-menu" variant="shell"></zn-menu>
           </zn-dropdown>
         </div>
       </div>
@@ -502,35 +506,35 @@ export default class ToolbarComponent extends ZincElement {
         <zn-button slot="trigger"
                    class="toolbar__dropdown-trigger toolbar__header-dropdown-trigger"
                    color="transparent"
-                   icon="arrow_drop_down"
+                   icon="chevron-down@lu"
                    icon-size="18"
                    icon-position="right">
-          <zn-icon src="match_case" size="18" color="primary"></zn-icon>
+          <zn-icon src="case-sensitive@lu" size="18" color="primary"></zn-icon>
         </zn-button>
-        <zn-menu>
+        <zn-menu variant="shell">
           <zn-menu-item type="checkbox"
                         checked-position="right"
                         data-format="header"
                         data-format-type="1"
-                        data-icon="format_h1">
-            <zn-icon src="format_h1" size="18" slot="prefix"></zn-icon>
+                        data-icon="heading-1@lu">
+            <zn-icon src="heading-1@lu" size="18" slot="prefix"></zn-icon>
             Heading 1
           </zn-menu-item>
           <zn-menu-item type="checkbox"
                         checked-position="right"
                         data-format="header"
                         data-format-type="2"
-                        data-icon="format_h2">
-            <zn-icon src="format_h2" size="18" slot="prefix"></zn-icon>
+                        data-icon="heading-2@lu">
+            <zn-icon src="heading-2@lu" size="18" slot="prefix"></zn-icon>
             Heading 2
           </zn-menu-item>
           <zn-menu-item type="checkbox"
                         checked-position="right"
                         data-format="header"
                         data-format-type=""
-                        data-icon="match_case"
+                        data-icon="case-sensitive@lu"
                         checked>
-            <zn-icon src="match_case" size="18" slot="prefix"></zn-icon>
+            <zn-icon src="case-sensitive@lu" size="18" slot="prefix"></zn-icon>
             Normal
           </zn-menu-item>
         </zn-menu>
@@ -545,34 +549,34 @@ export default class ToolbarComponent extends ZincElement {
         <zn-button slot="trigger"
                    class="toolbar__dropdown-trigger toolbar__format-dropdown-trigger"
                    color="transparent"
-                   icon="arrow_drop_down"
+                   icon="chevron-down@lu"
                    icon-size="18"
                    icon-position="right">
-          <zn-icon src="format_color_text" size="18"></zn-icon>
+          <zn-icon src="type@lu" size="18"></zn-icon>
         </zn-button>
-        <zn-menu>
+        <zn-menu variant="shell">
           <zn-menu-item type="checkbox" checked-position="right" data-format="strike">
-            <zn-icon src="format_strikethrough" size="18" slot="prefix"></zn-icon>
+            <zn-icon src="strikethrough@lu" size="18" slot="prefix"></zn-icon>
             Strikethrough
           </zn-menu-item>
           <zn-menu-item type="checkbox" checked-position="right" data-format="blockquote">
-            <zn-icon src="format_quote" size="18" slot="prefix"></zn-icon>
+            <zn-icon src="text-quote@lu" size="18" slot="prefix"></zn-icon>
             Quote
           </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>
+              <zn-icon src="code@lu" 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>
+              <zn-icon src="square-code@lu" 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>
+            <zn-icon src="remove-formatting@lu" size="18" slot="prefix"></zn-icon>
             Clear Formatting
           </zn-menu-item>
         </zn-menu>
@@ -583,17 +587,17 @@ export default class ToolbarComponent extends ZincElement {
     return html`
       <zn-button class="toolbar__format-button"
                  color="transparent"
-                 icon="format_bold"
+                 icon="bold@lu"
                  icon-size="18"
                  data-format="bold"></zn-button>
       <zn-button class="toolbar__format-button"
                  color="transparent"
-                 icon="format_italic"
+                 icon="italic@lu"
                  icon-size="18"
                  data-format="italic"></zn-button>
       <zn-button class="toolbar__format-button"
                  color="transparent"
-                 icon="format_underlined"
+                 icon="underline@lu"
                  icon-size="18"
                  data-format="underline"></zn-button>`;
   }
@@ -602,12 +606,12 @@ export default class ToolbarComponent extends ZincElement {
     return html`
       <zn-button class="toolbar__format-button"
                  color="transparent"
-                 icon="undo"
+                 icon="undo@lu"
                  icon-size="18"
                  data-format="undo"></zn-button>
       <zn-button class="toolbar__format-button"
                  color="transparent"
-                 icon="redo"
+                 icon="redo@lu"
                  icon-size="18"
                  data-format="redo"></zn-button>`;
   }
@@ -618,14 +622,14 @@ export default class ToolbarComponent extends ZincElement {
         <zn-button slot="trigger"
                    class="toolbar__dropdown-trigger toolbar__color-dropdown-trigger"
                    color="transparent"
-                   icon="arrow_drop_down"
+                   icon="chevron-down@lu"
                    icon-size="18"
                    icon-position="right">
-          <zn-icon src="colors" size="18"></zn-icon>
+          <zn-icon src="palette@lu" size="18"></zn-icon>
         </zn-button>
-        <zn-menu>
+        <zn-menu variant="shell">
           <zn-menu-item data-format="color" data-format-type="">
-            <zn-icon slot="prefix" class="color-icon--unset" src="format_color_reset" size="18"></zn-icon>
+            <zn-icon slot="prefix" class="color-icon--unset" src="brush-cleaning@lu" size="18"></zn-icon>
             Unset
           </zn-menu-item>
           ${colorDataProvider.getData.map((opt) => html`
@@ -644,19 +648,19 @@ export default class ToolbarComponent extends ZincElement {
         <zn-button slot="trigger"
                    class="toolbar__dropdown-trigger toolbar__list-dropdown-trigger"
                    color="transparent"
-                   icon="arrow_drop_down"
+                   icon="chevron-down@lu"
                    icon-size="18"
                    icon-position="right">
-          <zn-icon src="lists" size="18"></zn-icon>
+          <zn-icon src="list-plus@lu" size="18"></zn-icon>
         </zn-button>
-        <zn-menu>
+        <zn-menu variant="shell">
           <zn-menu-item type="checkbox"
                         checked-position="right"
                         data-format="list"
                         data-format-type="bullet"
                         data-text="Bulleted List"
-                        data-icon="format_list_bulleted">
-            <zn-icon src="format_list_bulleted" size="18" slot="prefix"></zn-icon>
+                        data-icon="list@lu">
+            <zn-icon src="list@lu" size="18" slot="prefix"></zn-icon>
             Bulleted
           </zn-menu-item>
           <zn-menu-item type="checkbox"
@@ -664,8 +668,8 @@ export default class ToolbarComponent extends ZincElement {
                         data-format="list"
                         data-format-type="ordered"
                         data-text="Numbered List"
-                        data-icon="format_list_numbered">
-            <zn-icon src="format_list_numbered" size="18" slot="prefix"></zn-icon>
+                        data-icon="list-ordered@lu">
+            <zn-icon src="list-ordered@lu" size="18" slot="prefix"></zn-icon>
             Numbered
           </zn-menu-item>
           <zn-menu-item type="checkbox"
@@ -673,8 +677,8 @@ export default class ToolbarComponent extends ZincElement {
                         data-format="list"
                         data-format-type="checked"
                         data-text="Checked List"
-                        data-icon="checklist">
-            <zn-icon src="checklist" size="18" slot="prefix"></zn-icon>
+                        data-icon="list-todo@lu">
+            <zn-icon src="list-todo@lu" size="18" slot="prefix"></zn-icon>
             Checked
           </zn-menu-item>
         </zn-menu>
@@ -687,39 +691,39 @@ export default class ToolbarComponent extends ZincElement {
         <zn-button slot="trigger"
                    class="toolbar__dropdown-trigger toolbar__file-dropdown-trigger"
                    color="transparent"
-                   icon="arrow_drop_down"
+                   icon="chevron-down@lu"
                    icon-size="18"
                    icon-position="right">
-          <zn-icon src="add" size="18"></zn-icon>
+          <zn-icon src="plus@lu" size="18"></zn-icon>
         </zn-button>
-        <zn-menu>
+        <zn-menu variant="shell">
           ${this._featureConfig.dividersEnabled ? html`
             <zn-menu-item checked-position="right" data-format="divider">
-              <zn-icon src="horizontal_rule" size="18" slot="prefix"></zn-icon>
+              <zn-icon src="minus@lu" 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>
+              <zn-icon src="link@lu" 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>
+              <zn-icon src="paperclip@lu" 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>
+              <zn-icon src="image@lu" 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>
+              <zn-icon src="video@lu" size="18" slot="prefix"></zn-icon>
               Video
             </zn-menu-item>
           ` : ''}
@@ -733,10 +737,10 @@ export default class ToolbarComponent extends ZincElement {
         <zn-button slot="trigger"
                    class="toolbar__dropdown-trigger toolbar__emoji-dropdown-trigger"
                    color="transparent"
-                   icon="arrow_drop_down"
+                   icon="chevron-down@lu"
                    icon-size="18"
                    icon-position="right">
-          <zn-icon src="insert_emoticon" size="18"></zn-icon>
+          <zn-icon src="smile-plus@lu" size="18"></zn-icon>
         </zn-button>
         <div class="emoji-picker"></div>
       </zn-dropdown>`;
@@ -748,10 +752,10 @@ export default class ToolbarComponent extends ZincElement {
         <zn-button slot="trigger"
                    class="toolbar__dropdown-trigger toolbar__date-dropdown-trigger"
                    color="transparent"
-                   icon="arrow_drop_down"
+                   icon="chevron-down@lu"
                    icon-size="18"
                    icon-position="right">
-          <zn-icon src="calendar_today" size="18"></zn-icon>
+          <zn-icon src="calendar@lu" size="18"></zn-icon>
         </zn-button>
         <div class="date-picker"></div>
       </zn-dropdown>`;

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

@@ -43,34 +43,14 @@
     }
   }
 
-  &__dropdown-trigger {
-    width: 44px;
-    height: 28px;
-    margin: 3px 2px;
-
-    &::part(icon) {
-      margin-left: 4px;
-    }
-  }
-
-  &__format-button,
-  &__action-button,
-  &__overflow-trigger {
-    width: 28px;
-    height: 28px;
-    margin: 3px 2px;
-  }
-
-  /* Move underline icon down a bit */
-  &__format-button[icon="format_underlined"]::part(base) {
-    position: relative;
-    top: 1px;
+  &__dropdown-trigger::part(icon) {
+    margin-left: 4px;
   }
 }
 
 .color-icon {
-  width: 15px;
-  height: 15px;
+  width: 18px;
+  height: 18px;
   display: block;
   border-radius: 100%;
   flex-shrink: 0;
@@ -91,8 +71,3 @@
     }
   }
 }
-
-/* Line up unset value with color chips */
-.color-icon--unset {
-  margin-inline-end: var(--zn-spacing-x-small);
-}

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

@@ -3,7 +3,7 @@ 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 Dialog from "../dialog/dialog";
 import type Emoji from "../emoji/emoji";
 import type ToolbarComponent from "./toolbar.component";
 import type ZnDropdown from "../../../dropdown";
@@ -12,7 +12,6 @@ import type ZnMenuItem from "../../../menu-item";
 class Toolbar extends QuillToolbar {
   private readonly _quill: Quill;
   private readonly _component: ToolbarComponent;
-  private _lastDialogUri?: string;
   private _formatters: Element[] = [];
 
   constructor(quill: Quill, options: {
@@ -168,17 +167,17 @@ class Toolbar extends QuillToolbar {
     const formats: Record<string, any> = this._quill.getFormat(range);
     if (!formats) return;
 
-    this._syncButtonState('format_bold', !!formats.bold);
-    this._syncButtonState('format_italic', !!formats.italic);
-    this._syncButtonState('format_underlined', !!formats.underline);
+    this._syncButtonState('bold@lu', !!formats.bold);
+    this._syncButtonState('italic@lu', !!formats.italic);
+    this._syncButtonState('underline@lu', !!formats.underline);
 
     this._updateHeadingFormatMenu(formats);
     this._updateListFormatMenu(formats);
     this._updateTextFormatMenu(formats);
     this._updateColorFormatMenu(formats);
 
-    this._updateDropdownTrigger('zn-dropdown.toolbar__header-dropdown', 'match_case');
-    this._updateDropdownTrigger('zn-dropdown.toolbar__list-dropdown', 'lists');
+    this._updateDropdownTrigger('zn-dropdown.toolbar__header-dropdown', 'case-sensitive@lu');
+    this._updateDropdownTrigger('zn-dropdown.toolbar__list-dropdown', 'list-plus@lu');
   }
 
   private _updateHeadingFormatMenu(formats: Record<string, any>) {
@@ -248,19 +247,25 @@ class Toolbar extends QuillToolbar {
     const items = menu?.querySelectorAll('zn-menu-item') as NodeListOf<ZnMenuItem> | undefined;
 
     let iconSrc = defaultIconSrc;
+    let iconLibrary = '';
     let iconColor = 'default';
     if (items?.length) {
       items.forEach((item: ZnMenuItem) => {
         const checked = item.checked ?? (item.hasAttribute('checked'));
         if (checked) {
           const icon = item.querySelector('zn-icon')!;
+          // zn-icon strips the `@library` suffix off `src` and stores it on the
+          // reflected `library` attribute, so carry both across — otherwise the
+          // rebuilt trigger loses the library and falls back to material.
           iconSrc = icon?.getAttribute('src') ?? iconSrc;
+          iconLibrary = icon?.getAttribute('library') ?? '';
           iconColor = 'primary';
         }
       });
     }
 
-    trigger.innerHTML = `<zn-icon src="${iconSrc}" color="${iconColor}" size="18"></zn-icon>`;
+    const libraryAttr = iconLibrary ? ` library="${iconLibrary}"` : '';
+    trigger.innerHTML = `<zn-icon src="${iconSrc}"${libraryAttr} color="${iconColor}" size="18"></zn-icon>`;
   }
 
   private _syncButtonState(icon: string, active: boolean) {
@@ -322,18 +327,11 @@ class Toolbar extends QuillToolbar {
   }
 
   private _openDialog(uri: string) {
-    if (this._lastDialogUri === uri) {
-      const dialog = document.querySelector(`zn-editor-dialog`) as DialogComponent | null;
-      if (!dialog) return;
-
-      dialog.dialogEl.showModal();
-    }
-
-    const dialog = document.querySelector(`zn-editor-dialog`) as DialogComponent | null;
+    const dialog = (this._quill.getModule('dialog') as Dialog | undefined)?.component;
     if (!dialog) return;
 
     dialog.dialogEl.showModal();
-    dialog.setContent(`<app-space id="app-editor-modal" allow-scripts auto-load uri="${uri}"></app-space>`);
+    dialog.setContent(`<app-space id="app-editor-modal" allow-scripts auto-load loading-text="Loading, please wait..." uri="${uri}"></app-space>`);
   }
 
   private _handleOverflowUpdate = () => {

package/src/components/expanding-action/expanding-action.component.ts

@@ -244,12 +244,13 @@ export default class ZnExpandingAction extends ZincElement {
   render() {
     return html`
       ${this.method === 'fill' ? html`
-        <zn-button color="transparent"
-                   class="expanding-action__button"
+        <zn-button class="expanding-action__button"
                    @click="${this.handleIconClicked}"
                    icon="${this.icon}"
                    icon-color="${this.color}"
-                   icon-size="20">
+                   icon-size="20"
+                   icon-button="small"
+                   plain>
         </zn-button>` : nothing}
       <div
         class="${classMap({
@@ -270,15 +271,21 @@ export default class ZnExpandingAction extends ZincElement {
   protected renderDropdown() {
     return html`
       <zn-dropdown class="expanding-action__dropdown"
-                   placement="bottom-end">
+                   placement="bottom-end"
+                   @zn-show="${() => {
+                     this.open = true;
+                   }}"
+                   @zn-hide="${() => {
+                     this.open = false;
+                   }}">
         <zn-button slot="trigger"
                    class="expanding-action__button"
-                   color="transparent"
                    icon="${this.icon}"
                    icon-color="${this.color}"
                    icon-size="20"
-                   notification="${this.count || nothing}"
-                   @click="${this.handleIconClicked}">
+                   icon-button="small"
+                   plain
+                   notification="${this.count || nothing}">
         </zn-button>
         <div id="content" class="expanding-action__content">
           <slot></slot>

package/src/components/expanding-action/expanding-action.scss

@@ -66,17 +66,59 @@
   }
 }
 
+.expanding-action--drop,
+.expanding-action--drop .expanding-action__dropdown,
+.expanding-action--drop .expanding-action__dropdown zn-button[slot="trigger"] {
+  height: 100%;
+}
+
 .expanding-action--drop .expanding-action__content {
+  --expanding-action-trigger-width: 36px;
+
+  position: relative;
   min-width: 300px;
   width: var(--expanding-action-basis, var(--zn-container-smp, 320px));
   max-width: 80vw;
   max-height: min(60vh, var(--expanding-action-max-height, var(--auto-size-available-height, 50vh)));
-  box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
   background-color: rgb(var(--zn-panel));
+  box-shadow: 0 8px 16px -6px rgba(33, 33, 33, 0.18);
   border: solid 1px rgb(var(--zn-border-color));
-  border-radius: var(--zn-border-radius-large);
+  border-top: 0;
+  border-radius: 0 0 var(--zn-border-radius) var(--zn-border-radius);
   padding: 0;
   height: 100%;
   overflow: hidden;
   overflow-y: auto;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 calc(var(--expanding-action-trigger-width) - 2px) auto 0;
+    z-index: 2;
+    height: 1px;
+    background: rgb(var(--zn-border-color));
+  }
+}
+
+:host([open]) .expanding-action__dropdown zn-button[slot="trigger"] {
+  position: relative;
+  z-index: calc(var(--zn-z-index-dropdown) + 1);
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: rgb(var(--zn-panel));
+    border: solid 1px rgb(var(--zn-border-color));
+    border-bottom-color: rgb(var(--zn-panel));
+    border-radius: var(--zn-border-radius) var(--zn-border-radius) 0 0;
+  }
+}
+
+:host([open]) .expanding-action__dropdown zn-button[slot="trigger"]::part(base) {
+  &:hover,
+  &:active {
+    background: transparent;
+  }
 }

package/src/components/file/file.scss

@@ -101,7 +101,7 @@
 
   position: relative;
   border: 1px solid var(--zn-input-border-color);
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   font: var(--zn-font-size-medium);
   min-height: 180px;
   transition: var(--zn-transition-medium) background,
@@ -164,7 +164,7 @@
     0 calc(var(--zn-droparea-checker-size) / 2),
     calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),
     calc(var(--zn-droparea-checker-size) / -2) 0;
-  border-radius: calc(var(--zn-border-radius-medium) - 1px);
+  border-radius: calc(var(--zn-border-radius) - 1px);
 }
 
 .droparea__preview {

package/src/components/header/header.component.ts

@@ -140,7 +140,7 @@ export default class ZnHeader extends ZincElement {
           ${hasPreviousPath ? html`
             <a href="${this.previousPath}" class="caption__back"
                data-target="${this.previousTarget ? this.previousTarget : ''}">
-              <zn-button icon="arrow_back" icon-size="20" color="transparent"></zn-button>
+              <zn-button icon="arrow-left@lu" icon-size="20" icon-button="small" plain></zn-button>
             </a>` : null}
 
           ${hasDefaultSlot ? html`

package/src/components/header/header.scss

@@ -15,8 +15,8 @@
   }
 
   &__caption {
-    font-weight: var(--zn-font-weight-medium);
-    font-size: var(--zn-font-size-large);
+    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;
@@ -214,7 +214,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: var(--zn-spacing-x-small);
+    gap: var(--zn-spacing-small);
     word-break: break-word;
   }
 

package/src/components/hover-container/hover-container.scss

@@ -36,7 +36,7 @@
     flex-direction: column;
     z-index: 2;
     background-color: var(--zn-panel-background-color);
-    border-radius: var(--zn-border-radius-large);
+    border-radius: var(--zn-border-radius);
     border: 1px solid rgb(var(--zn-border-color));
     box-shadow: var(--zn-shadow-x-large);
     width: var(--width);

package/src/components/icon/icon.component.ts

@@ -11,7 +11,7 @@ import type {IconNode, SVGProps} from 'lucide';
 
 import styles from './icon.scss';
 
-type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" |
+export type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" |
   "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" |
   "lucide";
 
@@ -70,6 +70,8 @@ export default class ZnIcon extends ZincElement {
 
   @property({reflect: true}) color: IconColor;
 
+  @property({reflect: true}) fill: IconColor;
+
   @property({type: Boolean}) padded: boolean = false;
   @property({type: Boolean}) blink: boolean = false;
 
@@ -244,9 +246,12 @@ export default class ZnIcon extends ZincElement {
           'icon--padded': this.padded,
           'icon--blink': this.blink,
           'icon--squared': this.squared,
+          'icon--filled': this.fill !== undefined && this.fill !== null,
+          [`icon--fill-${this.fill}`]: Boolean(this.fill) && this.isPresetColor(this.fill),
         })}" style="${styleMap({
           '--icon-size': this.size + "px",
           '--icon-color': (this.color && !this.isPresetColor(this.color)) ? this.color : null,
+          '--icon-fill': (this.fill && !this.isPresetColor(this.fill)) ? this.fill : null,
           '--avatar-color': this.color ? null : (this.library === 'avatar' ? this.getColorForAvatar(this.getAvatarInitials(this.src)) : null)
         })}">
           ${this.library && this.library !== "src" ? html`