@aquera/nile-elements 0.1.40-beta-2.1 → 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-2.1",
+  "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-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`