@aquera/nile-elements 2.0.7 → 2.0.9

package/package.json

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

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

@@ -123,7 +123,7 @@ export const styles = css`
   }
 
   .nile-chip--disabled {
-    
+
     /* opacity: 0.5; */
     cursor: not-allowed;
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
@@ -178,7 +178,7 @@ export const styles = css`
   nile-auto-complete::part(base) {
     height: auto;
   }
-  
+
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
     box-shadow: var(--nile-box-shadow-10);
@@ -189,8 +189,8 @@ export const styles = css`
     box-shadow: none;
   }
 
-
-  .nile-chip.nile-chip--open:hover  {
+  .nile-chip.nile-chip--open:hover,
+  :host(:not([disabled])) .nile-chip:focus-within {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));
     box-shadow: var(--nile-box-shadow-10, 0 0 0 1px  var(--ng-colors-border-brand) inset ); /* Need to create token for it */
   }
@@ -200,10 +200,6 @@ export const styles = css`
     gap: 2px;
   }
 
-  nile-auto-complete::part(base)::before {
-    box-shadow: none;
-  }
-
   :host([required]) .form-control--has-label .form-control__label::after {
   content: '*';
     margin-inline-start: -2px;

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

@@ -194,7 +194,7 @@ export const styles = css`
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-primary-900, var(--ng-colors-text-primary-900));
   }
 
   .input--standard.input--disabled {
@@ -349,7 +349,7 @@ export const styles = css`
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .input__control:focus {
@@ -561,9 +561,8 @@ export const styles = css`
     box-shadow: 0 0 0 0;
   }
 
-  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
-    border: none;
-    box-shadow: 0 0 0 0;
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled)::before {
+    box-shadow: none;
   }
 
   .input__password {

package/src/nile-input/nile-input.test.ts

@@ -103,4 +103,10 @@ describe('NileInput', () => {
   it('98. type tel', async () => { const el = await fixture<NileInput>(html`<nile-input type="tel"></nile-input>`); expect(el.type).to.equal('tel'); });
   it('99. type url', async () => { const el = await fixture<NileInput>(html`<nile-input type="url"></nile-input>`); expect(el.type).to.equal('url'); });
   it('100. full integration', async () => { const el = await fixture<NileInput>(html`<nile-input type="email" name="email" value="test@test.com" size="large" filled pill class="inp" id="i1"></nile-input>`); expect(el.type).to.equal('email'); expect(el.name).to.equal('email'); expect(el.value).to.equal('test@test.com'); expect(el.size).to.equal('large'); expect(el.filled).to.be.true; expect(el.pill).to.be.true; expect(el.id).to.equal('i1'); });
+
+  // UIF-1350 — nile-chip / nile-auto-complete render a borderless nile-input; the
+  // nxtgen focus ring is an inset box-shadow on ::before, so `no-border` has to
+  // suppress it too or a blue border shows up inside the chip on focus.
+  it('101. no-border paints no focus ring', async () => { const el = await fixture<NileInput>(html`<nile-input no-border no-outline style="--ng-colors-border-brand: rgb(0, 0, 255)"></nile-input>`); el.input.focus(); await el.updateComplete; const base = el.shadowRoot!.querySelector('[part="base"]') as HTMLElement; expect(base.classList.contains('input--focused')).to.be.true; expect(getComputedStyle(base, '::before').boxShadow).to.equal('none'); });
+  it('102. focus ring still paints without no-border', async () => { const el = await fixture<NileInput>(html`<nile-input style="--ng-colors-border-brand: rgb(0, 0, 255)"></nile-input>`); el.input.focus(); await el.updateComplete; const base = el.shadowRoot!.querySelector('[part="base"]') as HTMLElement; expect(getComputedStyle(base, '::before').boxShadow).to.contain('inset'); });
 });

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

@@ -195,7 +195,7 @@ export const styles = css`
     display: flex;
     flex: 1;
     align-items: center;
-    flex-wrap: no-wrap;
+    flex-wrap: nowrap;
     margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
@@ -216,6 +216,98 @@ export const styles = css`
     margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
+  button.select__tags-count {
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    text-align: inherit;
+  }
+
+  button.select__tags-count:disabled {
+    cursor: not-allowed;
+  }
+
+  .select__tags--fitted {
+    min-width: 0;
+  }
+
+  .select__tags nile-lite-tooltip.select__tag-tip {
+    display: contents;
+  }
+
+  .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) {
+    max-width: 100%;
+  }
+
+  .select__tags nile-tag::part(prefix_content_wrapper) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .select__tags nile-tag::part(content) {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    /* The tag's line-height of 1 leaves the clip box shorter than the glyph
+       box, so descenders are cut. Pad the clip box, negate it in layout. */
+    padding-block: 3px;
+    margin-block: -3px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
+    text-overflow: ellipsis;
+  }
+
+  .select__tags nile-tag::part(remove-button) {
+    flex: 0 0 auto;
+  }
+
+  .select__tags--fitted nile-tag:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));
+    height: var(--nile-height-26px, var(--ng-height-26px));
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px dashed
+      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+  }
+
   .select__tags::slotted(nile-tag) {
     cursor: pointer !important;
   }
@@ -443,6 +535,8 @@ export const styles = css`
     bottom: 0;
     z-index: 1;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    container-type: inline-size;
+    container-name: nile-select-footer;
   }
 
   .select__custom-footer {
@@ -469,10 +563,40 @@ export const styles = css`
     flex-direction: row;
     align-items: center;
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    gap: var(--nile-spacing-none, var(--ng-spacing-none));
     justify-content: space-between;
   }
 
+  .select__footer-action,
+  .select__footer .select__clear {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    min-width: 0;
+  }
+
+  .select__footer-glyph {
+    flex: 0 0 auto;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .select__footer-label {
+    white-space: nowrap;
+  }
+
+  @container nile-select-footer (max-width: 178px) {
+    .select__clear .select__footer-label {
+      display: none;
+    }
+  }
+
+  @container nile-select-footer (max-width: 137px) {
+    .select__footer-label {
+      display: none;
+    }
+  }
+
   :host([legacy]) .select__footer {
     background: var(--nile-colors-neutral-100);
     border-top: 1px solid var(--nile-colors-neutral-400);
@@ -516,10 +640,6 @@ export const styles = css`
     }
   }
 
-  .select__invisible {
-    opacity: 0;
-  }
-
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }