@aquera/nile-elements 2.0.7 → 2.0.8

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.8",
   "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'); });
 });