@aquera/nile-elements 0.1.35-beta-1.7 → 0.1.35-beta-1.11

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

@@ -61,7 +61,7 @@ export const styles = css`
     z-index: 2;
     max-width: 100%;
     max-height: 100%;
-    background-color: var(--nile-colors-white-base);
+    background-color: hsl(0, 0%, 100%);
     box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
     overflow: auto;
     pointer-events: all;
@@ -114,7 +114,7 @@ export const styles = css`
   .drawer__title {
     flex: 1 1 auto;
     font: inherit;
-    font-size: var(--nile-type-scale-6);
+    font-size: 1.25rem;
     line-height: 1.4;
     padding: var(--header-spacing);
     margin: 0;
@@ -134,7 +134,7 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--nile-type-scale-4);
+    font-size: 1rem;
   }
 
   .drawer__body {
@@ -179,7 +179,7 @@ export const styles = css`
 
   @media (forced-colors: active) {
     .drawer__panel {
-      border: solid 1px var(--nile-colors-white-base);
+      border: solid 1px hsl(0, 0%, 100%);
     }
   }
 `;

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

@@ -40,10 +40,10 @@ export const styles = css`
   }
 
   .dropdown__panel {
-    font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 1rem;
+    font-weight: 400;
     box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: 0.25rem;
     pointer-events: none;
   }
 

package/src/nile-empty-state/nile-empty-state.css.ts

@@ -19,9 +19,9 @@ export const styles = css`
   }
 
   .empty-state--sm {
-    --nile-es-text-size: var(--nile-type-scale-4);
-    --nile-es-text-line-height: var(--nile-line-height-medium);
-    --nile-es-subtext-size: var(--nile-type-scale-3);
+    --nile-es-text-size:16px;
+    --nile-es-text-line-height:24px;
+    --nile-es-subtext-size:14px;
     --nile-es-subtext-line-height:20px;
     
     --nile-es-icon-size:48px;
@@ -35,12 +35,12 @@ export const styles = css`
   }
 
   .empty-state--md {
-    --nile-es-text-size: var(--nile-type-scale-5);
-    --nile-es-text-line-height: var(--nile-line-height-large);
-    --nile-es-subtext-size: var(--nile-type-scale-3);
-    --nile-es-subtext-line-height: var(--nile-line-height-small);
+    --nile-es-text-size:18px;
+    --nile-es-text-line-height:28px;
+    --nile-es-subtext-size:14px;
+    --nile-es-subtext-line-height:20px;
 
-    --nile-es-icon-size: var(--nile-spacing-5-x);
+    --nile-es-icon-size:48px;
     --nile-es-flat-option-border-radius:5px;
     --nile-es-img-height:128px;
     --nile-es-img-width:172px;
@@ -51,10 +51,10 @@ export const styles = css`
   }
 
   .empty-state--lg {
-    --nile-es-text-size: var(--nile-spacing-2xl);
-    --nile-es-text-line-height: var(--nile-line-height-large);
-    --nile-es-subtext-size: var(--nile-type-scale-4);
-    --nile-es-subtext-line-height: var(--nile-line-height-medium);
+    --nile-es-text-size:20px;
+    --nile-es-text-line-height:30px;
+    --nile-es-subtext-size:16px;
+    --nile-es-subtext-line-height:24px;
 
     --nile-es-icon-size:56px;
     --nile-es-flat-option-border-radius:10px;
@@ -106,7 +106,7 @@ export const styles = css`
   .empty-state__img__icon {
     height: var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
-    border-radius: var(--nile-radius-full);
+    border-radius: 50%;
     display: grid;
     place-items: center;
     background: var(--nile-colors-neutral-500);
@@ -119,7 +119,7 @@ export const styles = css`
     background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);
     width: 104px;
     height: 104px;
-    border-radius: var(--nile-radius-full);
+    border-radius: 50%;
     display:flex;
     justify-content:center;
     align-items:center;
@@ -148,7 +148,7 @@ export const styles = css`
 
   .empty-state__text {
     font-size: var(--nile-es-text-size);
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: 600;
     line-height: var(--nile-es-text-line-height);
     text-align: center;
     font-style: normal;
@@ -156,7 +156,7 @@ export const styles = css`
 
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: 400;
     line-height: var(--nile-es-subtext-line-height);
     text-align: center;
     color:var(--nile-colors-dark-500);
@@ -169,4 +169,4 @@ export const styles = css`
   }
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-error-message/nile-error-message.css.ts

@@ -30,15 +30,15 @@ export const styles = css`
 
   .nile-error-message__response {
     color: var(--nile-colors-dark-500);
-    margin-top: var(--nile-spacing-sm);
-    line-height: var(--nile-line-height-xsmall);
+    margin-top:6px;
+    line-height: 16px;
     max-height: var(--nile-error-max-height, 48px);
     overflow-x: auto;
   }
 
   .nile-error-message__icon {
     vertical-align: middle;
-    margin-right: var(--nile-spacing-xxs);
+    margin-right:2px;
   }
 
   .nile-error-message__more-button {
@@ -46,18 +46,18 @@ export const styles = css`
     cursor: pointer;
     white-space: nowrap;
     display: inline-flex;
-    gap: var(--nile-spacing-xs);
+    gap: 4px;
     align-items: center
   }
 
   .nile-error-message__response-expanded {
-    line-height: var(--nile-line-height-small);
+    line-height: 18px;
     height: auto;
     border: 1px solid var(--nile-colors-red-500);
     border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-sm);
-    margin-top: var(--nile-spacing-md);
-    padding: var(--nile-spacing-lg);
+    border-radius: 4px;
+    margin-top: 8px;
+    padding: 12px;
     background: var(--nile-colors-neutral-100);
   }
 
@@ -66,9 +66,9 @@ export const styles = css`
     overflow-y: auto;
     border: 1px solid var(--nile-colors-red-500);
     border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-radius-xs);
-    margin-top: var(--nile-spacing-lg);
-    padding: var(--nile-spacing-lg);
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px;
     background: var(--nile-colors-neutral-100);
     transition: max-height 0.3s ease-in-out;
     flex-shrink: 0;
@@ -79,14 +79,14 @@ export const styles = css`
     overflow: hidden;
     transition: max-height 0.3s ease-in-out;
     visibility: hidden;
-    padding: var(--nile-spacing-none) var(--nile-spacing-lg);
+    padding: 0 12px;
   }
 
   .nile-error-message__response-expanded.expanded {
     max-height: var(--nile-error-max-dialog-height, 48px);
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: var(--nile-spacing-md);
+    padding: 8px;
   }
 `;
 

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -17,15 +17,15 @@ export const styles = css`
 
   .nile-error-notification {
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-2);
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 12px;
     letter-spacing: 0.2px;
     border: 1px solid var(--indication-color);
     border-left: 6px solid var(--indication-color);
-    border-radius: var(--nile-radius-radius-xs);
-    padding: var(--nile-spacing-md);
+    border-radius: 4px;
+    padding: 8px;
     background: var(--nile-colors-neutral-100);
     color: var(--indication-color);
     box-sizing: border-box;
@@ -33,7 +33,7 @@ export const styles = css`
 
   .nile-error-notification__icon {
     vertical-align: middle;
-    margin-right: var(--nile-spacing-xs);
+    margin-right: 4px;
   }
 `;
 

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

@@ -23,26 +23,30 @@ export const styles = css`
   .chip {
     display: inline-flex;
     align-items: center;
-    padding: 4px 8px;
+    height: 30px;
+    padding: 8px;
     border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
-    border-radius: var(--nile-radius-radius-xs);
-    font-size: var(--nile-type-scale-3);
+    border-radius: 4px;
+    font-size: 14px;
     background-color: var(--nile-filter-chip-background-default);
     color: var(--nile-filter-chip-text-default);
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
-    gap: 6px;
-    margin-right: 6px;
+    box-sizing: border-box;
   }
 
   .chip:hover {
     background-color: var(--nile-filter-chip-hover-background);
   }
+ .chip:active {
+  background-color: var(--nile-filter-chip-active-background);
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
+:host([active]) .chip {
+  background-color: var(--nile-filter-chip-active-background);
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
 
-  .chip:active {
-    background-color: var(--nile-filter-chip-active-background);
-    border-color: var(--nile-filter-chip-active-border-color-stroke);
-  }
 
   .icon {
     color: var(--nile-filter-chip-icon-color-default);
@@ -86,20 +90,22 @@ export const styles = css`
   }
 
 
-  .value {
-    color: var(--nile-filter-chip-values-color-default);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 140px;
-  }
+ .value {
+  color: var(--nile-filter-chip-values-color-default);
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 140px;
+  vertical-align: bottom;
+}
+
 
   .close-icon {
     color: var(--nile-filter-chip-close-icon-color-default);
     cursor: pointer;
     display: flex;
     align-items: center;
-    padding: 2px;
     border-radius: 50%;
     transition: background-color 0.2s;
   }
@@ -108,6 +114,20 @@ export const styles = css`
     background-color: var(--nile-filter-chip-close-icon-hover-background);
     color: var(--nile-filter-chip-close-icon-hover-color);
   }
+
+.label-wrapper {
+  margin-left:6px;
+  margin-right: 4px;
+}
+
+.value-wrapper {
+  margin-right: 4px; 
+}
+
+.badge-wrapper {
+  margin-right: 12px;  
+}
+
 `;
 
 export default [styles];

package/src/nile-filter-chip/nile-filter-chip.test.ts

@@ -49,16 +49,16 @@ describe('<nile-filter-chip>', () => {
     expect(iconSpan.textContent).to.equal('★');
   });
 
-  it('does not render a badge when extraCount is zero', async () => {
+  it('does not render a badge when viewMoreCount is zero', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip extraCount="0" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip viewMoreCount="0" label="L" text="T"></nile-filter-chip>
     `);
     expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
   });
 
-  it('renders a +badge when extraCount > 0', async () => {
+  it('renders a +badge when viewMoreCount > 0', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip extraCount="5" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip viewMoreCount="5" label="L" text="T"></nile-filter-chip>
     `);
     const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;
     expect(badge).to.exist;
@@ -74,17 +74,17 @@ describe('<nile-filter-chip>', () => {
     const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;
     setTimeout(() => chip.click());
     const ev = await oneEvent(el, 'nile-click');
-    expect(ev.detail).to.deep.equal({ text: 'T', extraCount: 0 });
+    expect(ev.detail).to.deep.equal({ text: 'T', viewMoreCount: 0 });
   });
 
   it('dispatches `nile-close` on close icon click and removes itself', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip closable extraCount="2" text="TT"></nile-filter-chip>
+      <nile-filter-chip closable viewMoreCount="2" text="TT"></nile-filter-chip>
     `);
     const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;
     setTimeout(() => closeIcon.click());
     const ev = await oneEvent(el, 'nile-close');
-    expect(ev.detail).to.deep.equal({ text: 'TT', extraCount: 2 });
+    expect(ev.detail).to.deep.equal({ text: 'TT', viewMoreCount: 2 });
     expect(document.body.contains(el)).to.be.false;
   });
 

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

@@ -12,11 +12,13 @@ import { styles } from './nile-filter-chip.css';
 export class NileFilterChip extends NileElement {
   @property({ type: String }) label = '';
   @property({ type: String }) text = '';
-  @property({ type: Number }) extraCount: number = 0;
+  @property({ type: Number }) viewMoreCount: number = 0;
   @property({ type: Boolean }) editable = false;
   @property({ type: Boolean }) closable = false;
   @property({ type: String }) icon = '';
   @property({ type: String }) removeIcon = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
 
   private static activeChips: NileFilterChip[] = [];
 
@@ -47,41 +49,50 @@ export class NileFilterChip extends NileElement {
   private handleClose(event: Event) {
     event.stopPropagation();
     this.dispatchEvent(
-      new CustomEvent('nile-close', { detail: { text: this.text, extraCount: this.extraCount } })
+      new CustomEvent('nile-close', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
     );
     this.remove();
   }
 
   private handleClick() {
     this.dispatchEvent(
-      new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } })
+      new CustomEvent('nile-click', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
     );
   }
 
   private getLabelSlot(): TemplateResult {
     return html`
+    <span class="label-wrapper">
       <slot name="label">
         <span class="label">${this.label}:</span>
       </slot>
+    </span>
+
     `;
   }
 
   private getValueSlot(): TemplateResult {
     return html`
+    <span class="value-wrapper">
       <slot name="value">
         <span class="value">${this.text}</span>
       </slot>
+    </span>
+
     `;
   }
 
-  private getExtraCountSlot(): TemplateResult {
+  private getviewMoreCountSlot(): TemplateResult {
     return html`
       <slot name="suffix">
-        ${this.extraCount
+        ${this.viewMoreCount
           ? html`
+          <span class="badge-wrapper">
               <nile-badge variant="primary" pilltype="pill-color">
-                +${this.extraCount}
+                +${this.viewMoreCount}
               </nile-badge>
+          </span>
+
             `
           : html``}
       </slot>
@@ -109,7 +120,7 @@ export class NileFilterChip extends NileElement {
         ${this.getLabelSlot()}
         <slot name="content"></slot>
         ${this.getValueSlot()}
-        ${this.getExtraCountSlot()}
+        ${this.getviewMoreCountSlot()}
         ${this.getCloseIconSlot()}
       </div>
     `;

package/src/nile-form-error-message/nile-form-error-message.css.ts

@@ -21,15 +21,15 @@ export const styles = css`
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-form-error-text-font-size);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 12px;
     line-height: var(--nile-form-error-text-line-height);
     letter-spacing: 0.2px;
-    margin-top: var(--nile-spacing-sm);
+    margin-top: 6px;
   }
 
   .nile-form-error-message__icon {
-    margin-right: var(--nile-spacing-sm);
+    margin-right: 6px;
   }
 `;
 

package/src/nile-form-group/nile-form-group.css.ts

@@ -37,7 +37,8 @@ export const styles = css`
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--nile-spacing-1-x);
-    border-radius: var(--nile-radius-base-standard) var(--nile-radius-base-standard) var(--nile-radius-radius-none) var(--nile-radius-radius-none);
+    border-radius: var(--nile-radius-base-standard)
+      var(--nile-radius-base-standard) 0 0;
     background: var(--nile-colors-neutral-100);
   }
 
@@ -57,7 +58,7 @@ export const styles = css`
     font-feature-settings: 'clig' off, 'liga' off;
     font-size: var(--nile-type-scale-4);
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
+    font-weight: 500;
     line-height: var(--nile-type-scale-4);
     letter-spacing: 0.2px;
   }

package/src/nile-form-help-text/nile-form-help-text.css.ts

@@ -22,10 +22,10 @@ export const styles = css`
 
   .nile-form-help-text {
     display:flex;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: 400;
     letter-spacing: 0.2px;
-    margin-top: var(--nile-spacing-sm);
-    margin-right: var(--nile-spacing-xs);
+    margin-top: 6px;
+    margin-right: 4px;
     width: auto;
   }
 
@@ -36,7 +36,7 @@ export const styles = css`
 
   .nile-form-help-text__more-button {
     display: inline-flex;
-    gap: var(--nile-spacing-xs);
+    gap: 4px;
     color: var(--nile-colors-primary-600);
     cursor: pointer;
     white-space: nowrap;

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

@@ -47,14 +47,14 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: var(--nile-radius-radius-xl);
+		border-radius: 8px;
 		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
 
 	.hero__slot__container {
 		height:var(--nile-hero-height);
-		padding-left: var(--nile-spacing-5xl);
+		padding-left: 48px;
 		display: flex;
 		align-items: center;
 		gap:var(--nile-spacing-spacing-xl);
@@ -86,4 +86,4 @@ export const styles = css`
 	}
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-hero-header/nile-hero-header.css.ts

@@ -16,8 +16,8 @@ export const styles = css`
 		width:100%;
 		display: flex;
 		align-items: center;
-		padding:var(--nile-spacing-xl) var(--nile-spacing-5xl);
-		gap: var(--nile-spacing-xl);
+		padding:16px 48px;
+		gap: 16px;
 		border-bottom: 1px solid rgb(234, 236, 240);
 	}
 
@@ -26,7 +26,7 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: var(--nile-radius-radius-xl);
+		border-radius: 8px;
 		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
@@ -40,4 +40,4 @@ export const styles = css`
 	}
 `;
 
-export default [styles];
+export default [styles];