@kubex/zinc 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/shared/_form-elements.scss

@@ -39,7 +39,7 @@ select {
   }
 
   @include mixins.media-query(sm) {
-    padding: mixins.spacing(sm);
+    padding: mixins.spacing(xs);
   }
 }
 
@@ -49,8 +49,8 @@ label {
   line-height: var(--zn-spacing-medium);
   color: rgb(var(--zn-text-heading));
   display: block;
-  margin-bottom: mixins.spacing(xs);
-  margin-top: mixins.spacing(md);
+  margin-bottom: mixins.spacing(xxs);
+  margin-top: mixins.spacing(sm);
 }
 
 input[type=checkbox], input[type=radio] {
@@ -65,7 +65,7 @@ input[type=range] {
   appearance: none;
   border-radius: 10px;
   background-color: rgb(var(--zn-border-color));
-  height: mixins.spacing(sm);
+  height: mixins.spacing(xs);
   accent-color: rgb(var(--zn-primary));
   width: 100%;
   max-width: mixins.container-width(md);
@@ -74,13 +74,13 @@ input[type=range] {
 fieldset {
   border-color: rgba(var(--zn-primary), 20%);
   border-width: 2px;
-  padding: 0 mixins.spacing(md) mixins.spacing(md);
+  padding: 0 mixins.spacing(sm) mixins.spacing(sm);
 }
 
 select {
 
   option {
-    padding: mixins.spacing(xs);
+    padding: mixins.spacing(xxs);
   }
 
   > option:checked {
@@ -90,7 +90,7 @@ select {
 }
 
 fieldset > legend {
-  padding: mixins.spacing(xs);
+  padding: mixins.spacing(xxs);
 }
 
 input[type=button],
@@ -105,22 +105,22 @@ button[type=button]:not(.button) {
 }
 
 div + button {
-  margin-top: mixins.spacing(md);
+  margin-top: mixins.spacing(sm);
 }
 
 input[type=file]::-webkit-file-upload-button {
   @include button.button;
 
-  margin-right: mixins.spacing(sm);
+  margin-right: mixins.spacing(xs);
 }
 
 input::-webkit-calendar-picker-indicator {
   cursor: pointer;
-  padding: mixins.spacing(sm);
+  padding: mixins.spacing(xs);
 }
 
 input[list]::-webkit-calendar-picker-indicator {
-  padding: mixins.spacing(sm) mixins.spacing(xs)
+  padding: mixins.spacing(xs) mixins.spacing(xxs)
 }
 
 .input--with-icon {
@@ -132,7 +132,7 @@ input[list]::-webkit-calendar-picker-indicator {
     top: 50%;
     pointer-events: none;
     transform: translateY(-50%);
-    left: mixins.spacing(sm);
+    left: mixins.spacing(xs);
     background-color: rgb(var(--zn-primary));
     color: rgb(var(--zn-text));
     border-radius: 50%;

package/scss/shared/_table.scss

@@ -48,7 +48,7 @@ table:not(.remarkd-table) {
   }
 
   th, td {
-    padding: m.spacing(md);
+    padding: m.spacing(sm);
     min-width: 90px;
     white-space: nowrap;
 

package/scss/shared/layout.scss

@@ -75,59 +75,59 @@
 }
 
 .zn-pad-y, .zn-py {
-  padding-top: #{mixins.spacing(md)};
-  padding-bottom: #{mixins.spacing(md)};
+  padding-top: #{mixins.spacing(sm)};
+  padding-bottom: #{mixins.spacing(sm)};
 }
 
 .zn-pad-x, .zn-px {
-  padding-left: #{mixins.spacing(md)};
-  padding-right: #{mixins.spacing(md)};
+  padding-left: #{mixins.spacing(sm)};
+  padding-right: #{mixins.spacing(sm)};
 }
 
 .zn-pr {
-  padding-right: #{mixins.spacing(md)};
+  padding-right: #{mixins.spacing(sm)};
 }
 
 .zn-pl {
-  padding-left: #{mixins.spacing(md)};
+  padding-left: #{mixins.spacing(sm)};
 }
 
 .zn-pt {
-  padding-top: #{mixins.spacing(md)};
+  padding-top: #{mixins.spacing(sm)};
 }
 
 .zn-pb {
-  padding-bottom: #{mixins.spacing(md)};
+  padding-bottom: #{mixins.spacing(sm)};
 }
 
 .zn-margin {
-  margin: #{mixins.spacing(md)};
+  margin: #{mixins.spacing(sm)};
 }
 
 .zn-mx {
-  margin-left: #{mixins.spacing(md)};
-  margin-right: #{mixins.spacing(md)};
+  margin-left: #{mixins.spacing(sm)};
+  margin-right: #{mixins.spacing(sm)};
 }
 
 .zn-my {
-  margin-top: #{mixins.spacing(md)};
-  margin-bottom: #{mixins.spacing(md)};
+  margin-top: #{mixins.spacing(sm)};
+  margin-bottom: #{mixins.spacing(sm)};
 }
 
 .zn-mt {
-  margin-top: #{mixins.spacing(md)};
+  margin-top: #{mixins.spacing(sm)};
 }
 
 .zn-mb {
-  margin-bottom: #{mixins.spacing(md)};
+  margin-bottom: #{mixins.spacing(sm)};
 }
 
 .zn-ml {
-  margin-left: #{mixins.spacing(md)};
+  margin-left: #{mixins.spacing(sm)};
 }
 
 .zn-mr {
-  margin-right: #{mixins.spacing(md)};
+  margin-right: #{mixins.spacing(sm)};
 }
 
 

package/scss/variables/_spacing.scss

@@ -14,13 +14,13 @@ $container: (
 
 // Spacing
 $spacing: (
-  px: 1px,
-  xxs: 3px,
-  xs: 5px,
-  sm: 10px,
-  md: 15px,
-  lg: 20px,
-  xl: 25px,
+  px: 2px,
+  xxs: 4px,
+  xs: 8px,
+  sm: 16px,
+  md: 24px,
+  lg: 32px,
+  xl: 40px,
 );
 
 // Common sizes

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

@@ -91,6 +91,10 @@ export default class ZnIcon extends ZincElement {
   defaultLibrary: IconLibrary = "material-symbols-outlined";
 
   convertToLibrary(input: string): IconLibrary {
+    return this.convertIndicatorToLibrary(input) ?? this.defaultLibrary
+  }
+
+  private convertIndicatorToLibrary(input: string): IconLibrary | undefined {
     switch (input) {
       case "material":
       case "mat":
@@ -130,7 +134,7 @@ export default class ZnIcon extends ZincElement {
         return "brands";
     }
 
-    return this.defaultLibrary
+    return undefined;
   }
 
   connectedCallback() {
@@ -148,11 +152,15 @@ export default class ZnIcon extends ZincElement {
       const atIndex = this.src.lastIndexOf('@');
       const libraryOrDomain = this.src.slice(atIndex + 1);
 
+      const indicatedLibrary = this.convertIndicatorToLibrary(libraryOrDomain);
+
       if (libraryOrDomain.includes('.')) {
         this.library = this.library ?? "gravatar";
-      } else if ((this.library === undefined) && libraryOrDomain !== "") {
+      } else if ((this.library === undefined) && indicatedLibrary !== undefined) {
         // if split[1] is a valid library name, set it
-        this.library = this.convertToLibrary(libraryOrDomain);
+        this.library = indicatedLibrary;
+        this.src = this.src.slice(0, atIndex);
+      } else if (this.library !== undefined && indicatedLibrary === this.library) {
         this.src = this.src.slice(0, atIndex);
       }
 

package/src/components/icon/icon.test.ts

@@ -54,4 +54,25 @@ describe('<zn-icon>', () => {
     expect(el.src).to.equal('circle-alert');
     expect(svg).to.exist;
   });
+
+  it('should remove a matching library indicator from the icon src', async () => {
+    const el = await fixture<ZnIcon>(html`
+      <zn-icon src="home@lu" library="lucide" size="48"></zn-icon>
+    `);
+
+    const svg = el.shadowRoot?.querySelector('svg.lucide');
+
+    expect(el.library).to.equal('lucide');
+    expect(el.src).to.equal('home');
+    expect(svg).to.exist;
+  });
+
+  it('should keep a mismatched library indicator in the icon src', async () => {
+    const el = await fixture<ZnIcon>(html`
+      <zn-icon src="home@lu" library="material-symbols-outlined" size="48"></zn-icon>
+    `);
+
+    expect(el.library).to.equal('material-symbols-outlined');
+    expect(el.src).to.equal('home@lu');
+  });
 });

package/src/components/popup/popup.scss

@@ -1,7 +1,7 @@
 @use "../../wc";
 
 :host {
-  --arrow-color: rgb(0, 0, 0, 0.9);
+  --arrow-color: rgb(var(--zn-color-text));
   --arrow-size: 6px;
   --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
   --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));

package/src/components/tooltip/tooltip.scss

@@ -26,12 +26,13 @@
 }
 
 .tooltip__body {
+  @include wc.text-style("paragraph");
+
   display: block;
   width: max-content;
   max-width: max-content;
   border-radius: 5px;
   background-color: var(--arrow-color);
-  font-size: 12px;
   text-align: start;
   white-space: normal;
   color: white;