@aquera/nile-elements 0.1.40-beta-1.9 → 0.1.40-beta-2.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.40-beta-1.9",
+  "version": "0.1.40-beta-2.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -104,7 +104,6 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@aquera/nile": "latest",
     "@open-wc/form-control": "^0.5.0",
     "@open-wc/form-helpers": "^0.2.1",
     "@rollup/plugin-node-resolve": "^15.0.1",

package/src/nile-card/nile-card.css.ts

@@ -40,7 +40,7 @@ export const styles = css`
     flex-direction: column;
     justify-items: stretch;
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    outline: var(--ng-colors-border-secondary) solid  var(--nile-outline-0-5px, var(--ng-outline-1px)); 
+    outline: solid var(--nile-outline-0-5px, var(--ng-outline-1px)) var(--border-color);
     outline-offset: var(--nile-outline-none, --ng-outline-neg-1);  
     border-radius: var(--border-radius);
     min-width: 273px;

package/src/nile-icon/index.ts

@@ -68,9 +68,6 @@ export class NileIcon extends LitElement {
   @property({ type: String, reflect: true })
   public size = SMALL_ICON_SIZE;
 
-  @property({ type: String, reflect: true })
-  public size_token = '';
-
   @state()
   private _svg = '';
 
@@ -117,7 +114,7 @@ export class NileIcon extends LitElement {
       stroke: var(--nile-svg-stroke);
     }
 
-    .nds-icon svg path {
+    .nds-icon svg * {
       fill: var(--nile-svg-fill);
     }
 
@@ -148,11 +145,6 @@ export class NileIcon extends LitElement {
       this.style.setProperty('--nile-svg-height', `${this.size}px`);
       this.style.setProperty('--nile-svg-width', `${this.size}px`);
     }
-
-    if (changedProperties.has('size_token')) {
-      this.style.setProperty('--nile-svg-height', `${this.size_token}`);
-      this.style.setProperty('--nile-svg-width', `${this.size_token}`);
-    }
  
     if (changedProperties.has('color')) {
       this.style.setProperty('--nile-svg-fill', `${this.color}`);

package/src/nile-icon-button/nile-icon-button.ts

@@ -122,6 +122,16 @@ export class NileIconButton extends NileElement {
     this.ishovered = false;
   }
 
+  private getTokenValueResolved(): any {
+    const thisValue = this; 
+  
+    const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);
+    if (!value) {
+      return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);
+    }
+    return value;
+  }
+
   render(): TemplateResult {
     const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;
@@ -161,7 +171,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="${this.getTokenValueResolved()}"
           ></nile-icon>
         </a>
       `;
@@ -201,7 +211,7 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="${this.getTokenValueResolved()}"
           ></nile-icon>
         </button>
       `;

package/src/nile-option/nile-option.css.ts

@@ -40,7 +40,7 @@ export const styles = css`
   }
 
   .option--single-select {
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
   .option--hover:not(.option--current):not(.option--disabled),  :host([aria-selected='true']) .option {

package/src/nile-select/nile-select.css.ts

@@ -180,7 +180,7 @@ export const styles = css`
     flex: 1;
     align-items: center;
     flex-wrap: no-wrap;
-    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
   }
@@ -308,7 +308,7 @@ export const styles = css`
   }
 
   .select--medium .select__tags {
-    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));
   }
 
   /* Pills */
@@ -360,7 +360,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-3px, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {
@@ -387,7 +387,7 @@ export const styles = css`
   }
 
   .select__options__search-enabled {
-    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));
   }
 
   .select__options {

package/src/nile-tag/nile-tag.css.ts

@@ -27,6 +27,7 @@ export const styles = css`
     user-select: none;
     border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
     gap: var(--nile-spacing-sm , var(--ng-spacing-sm));
+    justify-content: space-between;
   }
 
   .tag__remove::part(base) {
@@ -42,7 +43,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     height: var(--nile-height-26px , var(--ng-height-auto));
     border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
-    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-lg , var(--ng-spacing-md));
+    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-10px , var(--ng-spacing-md));
   }
 
   .tag--primary {
@@ -132,7 +133,7 @@ export const styles = css`
   }
 
   .tag__remove {
-    margin-inline-start: var(--nile-spacing-md , var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));
   }
 
   /*
@@ -151,10 +152,12 @@ export const styles = css`
   font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
 }
 
-  .cross_icon {
-    margin-left: auto;
+  .prefix_content_wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
   }
-
 `;
 
 export default [styles];

package/src/nile-tag/nile-tag.ts

@@ -120,9 +120,10 @@ export class NileTag extends NileElement {
 
         })}
       >
-        <slot name="prefix" part="prefix" class="tag__prefix"></slot>
-
-        <slot part="content" class="tag__content"></slot>
+        <div class="prefix_content_wrapper" part="prefix_content_wrapper">
+          <slot name="prefix" part="prefix" class="tag__prefix"></slot>
+          <slot part="content" class="tag__content"></slot>
+        </div>
 
         ${this.removable
           ? html`

package/vscode-html-custom-data.json

@@ -1960,7 +1960,7 @@
     },
     {
       "name": "nile-icon",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `size_token` {`string`} - \n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `override` - \n\nProperties:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `size_token` {`string`} - \n\n  * `_svg` {`string`} - \n\n  * `title` {`string`} - \n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `styles` - \n\n  * `buttonClassMap` {`ButtonClassMap`} - \n\n  * `override` - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `override` - \n\nProperties:\n\n  * `set` {IconName | undefined} - The name of the icon set\n\n  * `name` {IconName | undefined} - The name of the icon\n\n  * `description` {`string`} - A description of what the icon represents\n\n  * `method` {`string`} - \n\n  * `customSvgPath` {`string | undefined`} - A path to a custom SVG file to display as the icon\n\n  * `size` {`number`} - A size of what the icon represents\n\n  * `_svg` {`string`} - \n\n  * `title` {`string`} - \n\n  * `color` - Color\n\n  * `push` {`boolean`} - \n\n  * `noFill` {`boolean`} - \n\n  * `frame` - Retain Viewbox\n\n  * `styles` - \n\n  * `buttonClassMap` {`ButtonClassMap`} - \n\n  * `override` - ",
       "attributes": [
         {
           "name": "set",
@@ -1989,10 +1989,6 @@
           "name": "size",
           "description": "`size` {`number`} - A size of what the icon represents\n\nProperty: size\n\nDefault: 16"
         },
-        {
-          "name": "size_token",
-          "description": "`size_token` {`string`} - \n\nProperty: size_token\n\nDefault: "
-        },
         {
           "name": "color",
           "description": "`color` - Color\n\nProperty: color"