@aquera/nile-elements 2.0.12 → 2.0.14

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-auto-complete/nile-auto-complete.css.ts

@@ -62,6 +62,9 @@ export const styles = css`
    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
+  nile-menu {
+    border-color: var(--nile-custom-color-288, var(--ng-colors-border-primary));
+  }
 
 `;
 

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

@@ -177,9 +177,11 @@ export const styles = css`
 
   nile-auto-complete::part(base) {
     height: auto;
+    background-color: transparent;
   }
 
   .nile-chip:hover:not(.nile-chip--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary-hover));
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
   }

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

@@ -107,7 +107,7 @@ export const styles = css`
   .combobox--focused .combobox__trigger {
     border-color: var(--ng-colors-border-brand);
     box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .combobox--disabled .combobox__trigger {
@@ -161,7 +161,7 @@ export const styles = css`
 
   .combobox--filled .combobox__trigger {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
   }
 
   .combobox--filled.combobox--open .combobox__trigger,
@@ -356,7 +356,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding: 0;
     max-width: var(--auto-size-available-width);
@@ -416,7 +416,7 @@ export const styles = css`
   }
 
   .combobox__options nile-option[selected] {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-active));
   }
 
   .combobox__options nile-option[selected]::part(base) {
@@ -441,7 +441,7 @@ export const styles = css`
     justify-content: space-between;
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
     user-select: none;
   }
@@ -491,7 +491,7 @@ export const styles = css`
   .combobox__footer {
     flex-shrink: 0;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -630,7 +630,7 @@ export const styles = css`
   }
 
   .combobox__grid-col {
-    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
+    border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-primary));
   }
 
   .combobox__grid-col:last-child {
@@ -680,7 +680,7 @@ export const styles = css`
     overflow: hidden;
   }
   .combobox__group-sticky-overlay .combobox__group-header {
-    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+    box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
   }
 
   .combobox__group-header {
@@ -704,7 +704,7 @@ export const styles = css`
     letter-spacing: 0.06em;
     color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
     pointer-events: none;
     user-select: none;
   }

package/src/nile-command-menu/nile-command-menu.css.ts

@@ -58,7 +58,7 @@ export const styles = css`
     max-height: var(--max-height);
     overflow: hidden;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-lg, var(--ng-radius-xl));
     box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
   }
@@ -73,7 +73,7 @@ export const styles = css`
     align-items: center;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
   }
 
   .command__search-icon {
@@ -112,7 +112,7 @@ export const styles = css`
     flex-wrap: wrap;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
   }
 
   .command__scopes-label {
@@ -154,7 +154,7 @@ export const styles = css`
     align-items: center;
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
   }
@@ -184,7 +184,7 @@ export const styles = css`
     height: 20px;
     padding: 0 5px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     font-family: inherit;
     font-size: 11px;

package/src/nile-command-menu-item/nile-command-menu-item.css.ts

@@ -57,7 +57,7 @@ export const styles = css`
   /* Active / selected (keyboard or hover) */
   :host([active]:not([disabled])) .item,
   .item:hover {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
   }
 
@@ -116,7 +116,7 @@ export const styles = css`
     height: 20px;
     padding: 0 5px;
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     font-family: inherit;
     font-size: 11px;

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

@@ -51,7 +51,7 @@ export const styles = css`
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }

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

@@ -235,35 +235,23 @@ export const styles = css`
     display: contents;
   }
 
-  .select__tags nile-tag {
+  :host([showtooltip]) .select__tags nile-tag {
     flex: 0 1 auto;
     cursor: pointer;
     min-width: 0;
-  }
-
-  /* A chip is capped - and so truncated - only when a tooltip can reveal the
-     full value. Without one it keeps its natural width and the fit pass moves
-     the surplus into the +N button instead. */
-  :host([showtooltip]) .select__tags nile-tag {
     max-width: var(--nile-width-180px, var(--ng-height-180px));
   }
 
-  /* Only the fitted layout can move a chip into the +N button, so only there
-     can a chip refuse to shrink. */
-  :host(:not([showtooltip])) .select__tags--fitted nile-tag {
-    flex-shrink: 0;
-  }
-
-  .select__tags nile-tag::part(base) {
+  :host([showtooltip]) .select__tags nile-tag::part(base) {
     max-width: 100%;
   }
 
-  .select__tags nile-tag::part(prefix_content_wrapper) {
+  :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {
     flex: 1 1 auto;
     min-width: 0;
   }
 
-  .select__tags nile-tag::part(content) {
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
@@ -279,7 +267,7 @@ export const styles = css`
     text-overflow: ellipsis;
   }
 
-  .select__tags nile-tag::part(remove-button) {
+  :host([showtooltip]) .select__tags nile-tag::part(remove-button) {
     flex: 0 0 auto;
   }
 
@@ -299,7 +287,7 @@ export const styles = css`
     white-space: nowrap;
     cursor: pointer;
     border: 1px dashed
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
@@ -367,12 +355,12 @@ export const styles = css`
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
   }
 
   .select--filled.select--disabled .select__combobox {
@@ -383,7 +371,7 @@ export const styles = css`
 
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
 
@@ -486,7 +474,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     padding-block: var(--nile-spacing-none, var(--ng-spacing-none));
     padding-inline: var(--nile-spacing-none, var(--ng-spacing-none));
@@ -535,13 +523,16 @@ export const styles = css`
     bottom: 0;
     z-index: 1;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .select__pre-footer-area--query {
     container-type: inline-size;
     container-name: nile-select-footer;
   }
 
   .select__custom-footer {
     display: block;
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     padding: var(--nile-spacing-lg, var(--ng-spacing-lg))  ;
   }
@@ -556,7 +547,7 @@ export const styles = css`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     height: 15px;
     /* Auto layout */
     display: var(--nile-display-flex, var(--ng-display-flex));
@@ -640,6 +631,10 @@ export const styles = css`
     }
   }
 
+  .select__invisible {
+    opacity: 0;
+  }
+
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }