@aquera/nile-elements 0.1.50-beta-1.0 → 0.1.50-beta-1.3

package/dist/src/nile-avatar/nile-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n  /**\n   * The styles for Avatar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the url to the Avatar */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Gives the icon to the Avatar */\n  @property({ type: String, reflect: true }) variant:'icon' | 'image' | 'text' = 'text';\n\n  /** Gives the icon to the Avatar */\n  @property({ type: String, reflect: true }) icon = 'user';\n\n  /** Gives the default Image Letters to the Avatar */\n  @property({ type: String, reflect: true }) name: String = '';\n\n  /** Gives the default bg color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';\n\n  /** Gives the default text color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '#fff';\n\n  /** Gives the default border color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /** Gives a border radius of 50% to the Avatar */\n  @property({ type: Boolean, reflect: true }) isRounded = true;\n\n  @state() private imageError = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private generateInitials(): string {\n    if (!this.name) {\n      return '';\n    }\n    const nameParts = this.name\n      .split(' ')\n      .filter(part => part.length > 0)\n      .map(part => part.charAt(0).toUpperCase())\n      .slice(0, 2);\n    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n  }\n\n  private generateVariantCode(initials: string): number {\n    const char1 = initials.charCodeAt(0);\n    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n    return multifactor % 5;\n  }\n\n  private getDefaultIconSize() {\n    switch (this.size) {\n      case 'sm':\n        return '10';\n      case 'md':\n        return '16';\n      case 'lg':\n        return '20';\n      case 'xl':\n        return '24';\n      case '2xl':\n        return '28';\n      default:\n        return '16';\n    }\n  }\n\n  public render(): TemplateResult {\n    if('image'==this.variant && !this.imageError){\n      return this.getImageContent()\n    }\n    else{\n      const defaultInitials = this.generateInitials();\n      if('text'==this.variant && defaultInitials){\n        return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n      }\n      else{\n        return this.getContentWrapped(this.getIconContent(),defaultInitials)\n      }\n    }\n  }\n\n  getContentWrapped(content:TemplateResult,defaultInitials:string){\n    const variant__code = this.generateVariantCode(defaultInitials);\n    return html`\n    <div\n      class=${classMap({\n        text__avatar: true,\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n        variant__orange: variant__code === 0 && !this.bgColor,\n        variant__pink: variant__code === 1 && !this.bgColor,\n        variant__blue: variant__code === 2 && !this.bgColor,\n        variant__light_blue: variant__code === 3 && !this.bgColor,\n        variant__green: variant__code === 4 && !this.bgColor,\n      })}\n      part=\"avatar__content\"\n      style=\"\n        background-color: ${this.bgColor};\n        color:${this.textColor};\n        border: 1px solid ${this.borderColor};\n        border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}\"\n    >\n      ${content}\n    </div>`\n  }\n\n  getIconContent(){\n    return html`\n    <nile-icon\n      name=\"${this.icon}\"\n      color=\"${this.textColor && \"#fff\"!==this.textColor?this.textColor:'var(--nile-colors-dark-500)'}\"\n      size=\"${this.getDefaultIconSize()}\"\n    ></nile-icon>`\n  }\n\n  getImageContent(){\n    return html` \n    <img\n      src=\"${this.src}\"\n      class=\"avatar\"\n      class=${classMap({\n        avatar: true,\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n      })}\n      part=\"avatar__image\"\n      style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n      @error=\"${()=>this.imageError=true}\"\n      @load=\"${()=>this.imageError=false}\"\n    />`\n  }\n\n  /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-avatar': NileAvatar;\n  }\n}\n"]}
+{"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n  /**\n   * The styles for Avatar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the url to the Avatar */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Gives the icon to the Avatar */\n  @property({ type: String, reflect: true }) variant:'icon' | 'image' | 'text' = 'text';\n\n  /** Gives the icon to the Avatar */\n  @property({ type: String, reflect: true }) icon = 'user';\n\n  /** Gives the default Image Letters to the Avatar */\n  @property({ type: String, reflect: true }) name: String = '';\n\n  /** Gives the default bg color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';\n\n  /** Gives the default text color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '';\n\n  /** Gives the default border color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';\n\n  /** Gives a border radius of 50% to the Avatar */\n  @property({ type: Boolean, reflect: true }) isRounded = true;\n\n  @state() private imageError = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  private generateInitials(): string {\n    if (!this.name) {\n      return '';\n    }\n    const nameParts = this.name\n      .split(' ')\n      .filter(part => part.length > 0)\n      .map(part => part.charAt(0).toUpperCase())\n      .slice(0, 2);\n    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n  }\n\n  private generateVariantCode(initials: string): number {\n    const char1 = initials.charCodeAt(0);\n    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n    return multifactor % 5;\n  }\n\n  private getDefaultIconSize() {\n    switch (this.size) {\n      case 'xs':\n        return '6';\n      case 'sm':\n        return '10';\n      case 'md':\n        return '16';\n      case 'lg':\n        return '20';\n      case 'xl':\n        return '24';\n      case '2xl':\n        return '28';\n      default:\n        return '16';\n    }\n  }\n\n  public render(): TemplateResult {\n    if('image'==this.variant && !this.imageError){\n      return this.getImageContent()\n    }\n    else{\n      const defaultInitials = this.generateInitials();\n      if('text'==this.variant && defaultInitials){\n        return this.getContentWrapped(html`${defaultInitials}`,defaultInitials);\n      }\n      else{\n        return this.getContentWrapped(this.getIconContent(),defaultInitials)\n      }\n    }\n  }\n\n  getContentWrapped(content:TemplateResult,defaultInitials:string){\n    const variant__code = this.generateVariantCode(defaultInitials);\n    return html`\n    <div\n      class=${classMap({\n        text__avatar: true,\n        avatar__xs: this.size === 'xs',\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n        variant__orange: variant__code === 0 && !this.bgColor,\n        variant__pink: variant__code === 1 && !this.bgColor,\n        variant__blue: variant__code === 2 && !this.bgColor,\n        variant__light_blue: variant__code === 3 && !this.bgColor,\n        variant__green: variant__code === 4 && !this.bgColor,\n      })}\n      part=\"avatar__content\"\n      style=\"\n        background-color: ${this.bgColor};\n        color:${this.textColor?this.textColor:\"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500) )\"};\n        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'};\n        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}\"\n    >\n      ${content}\n    </div>`\n  }\n\n  getIconContent(){\n    return html`\n    <nile-icon\n      name=\"${this.icon}\"\n      color=\"${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}\"\n      size=\"${this.getDefaultIconSize()}\"\n    ></nile-icon>`\n  }\n\n  getImageContent(){\n    return html` \n    <img\n      src=\"${this.src}\"\n      class=\"avatar\"\n      class=${classMap({\n        avatar: true,\n        avatar__xs: this.size === 'xs',\n        avatar__small: this.size === 'sm',\n        avatar__medium: this.size === 'md',\n        avatar__large: this.size === 'lg',\n        avatar__extralarge: this.size === 'xl',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n      })}\n      part=\"avatar__image\"\n      style=\"\tbackground-image: url(${this.src}), linear-gradient(lightgray, lightgray);\"\n      @error=\"${()=>this.imageError=true}\"\n      @load=\"${()=>this.imageError=false}\"\n    />`\n  }\n\n  /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-avatar': NileAvatar;\n  }\n}\n"]}

package/dist/src/nile-badge/nile-badge.css.js

@@ -10,166 +10,195 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .badge {
-    padding: 2px 6px;
-    border-radius: 4px;
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: 22px;
+    height: var(--nile-height-22px, var(--ng-height-24px));
   }
 
   .badge__content {
-    font-family: var(--nile-font-family-serif);
-    font-size: 12px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 500;
-    line-height: 18px;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
   .badge--primary {
-    background: var(--nile-badge-color-background-primary);
-    color: var(--nile-badge-color-font-primary);
+    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));
+    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));
   }
 
   .badge--normal {
-    background: var(--nile-badge-color-background-normal);
+    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));
   }
 
   .badge--info {
-    background: var(--nile-badge-color-background-info);
+    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));
   }
 
   /* for v2 */
+
+    .badge--pill-outline {
+    background: transparent ;
+  }
   .badge--pink {
-    color: var(--nile-badge-color-font-pink);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);
-    background: var(--nile-badge-color-background-pink);
+    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));
+    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));
   }
 
   .badge--orange {
-    color: var(--nile-badge-color-font-orange);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);
-    background: var(--nile-badge-color-background-orange);
+    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
+    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
   }
 
   .badge--purple {
-    color: var(--nile-badge-color-font-purple);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);
-    background: var(--nile-badge-color-background-purple);
+    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));
+    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));
   }
 
   .badge--indigo {
-    color: var(--nile-badge-color-font-indigo);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);
-    background: var(--nile-badge-color-background-indigo);
+    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));
+    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));
   }
 
   .badge--blue {
-    color: var(--nile-badge-color-font-blue);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);
-    background: var(--nile-badge-color-background-blue);
+    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));
+    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));
   }
   .badge--blue-light {
-    color:var(--nile-badge-color-font-bluelight);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);
-    background: var(--nile-badge-color-background-bluelight);
+    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));
+    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));
   }
 
   .badge--gray-blue {
-    color: var(--nile-badge-color-font-grayblue);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);
-    background: var(--nile-badge-color-background-grayblue);
+    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));
+    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));
   }
 
   .badge--success {
-    color: var(--nile-badge-color-font-success);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);
-    background: var(--nile-badge-color-background-success);
+    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));
+    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));
   }
   .badge--warning {
-    color: var(--nile-badge-color-font-warning);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);
-    background: var(--nile-badge-color-background-warning);
+    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
+    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
   }
 
   .badge--error {
-    color: var(--nile-badge-color-font-error);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);
-    background: var(--nile-badge-color-background-error);
+    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));
+    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));
   }
 
   .badge--brand {
-    color: var(--nile-badge-color-font-brand);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);
-    background: var(--nile-badge-color-background-brand);
+    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));
+    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));
   }
 
   .badge--gray {
-    color: var(--nile-badge-color-font-gray);
-    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);
-    background: var(--nile-badge-color-background-gray);
+    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
+    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
   }
 
   .badge--pink.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));
   }
 
   .badge--orange.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
   }
 
   .badge--purple.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));
   }
 
   .badge--indigo.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));
   }
 
   .badge--blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));
   }
 
   .badge--blue-light.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));
   }
 
   .badge--gray-blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));
   }
 
   .badge--success.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));
   }
 
   .badge--warning.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
   }
 
   .badge--error.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));
   }
 
   .badge--brand.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));
   }
 
   .badge--gray.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));
   }
 
-  .badge--pill-outline {
-    background: transparent;
-  }
+
 
   .badge--rounded {
-    padding: 2px 8px;
-    border-radius: 100px;
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
   }
 `;
 export default [styles];

package/dist/src/nile-badge/nile-badge.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 22px;\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n    letter-spacing: 0.2px;\n  }\n\n  .badge--primary {\n    background: var(--nile-badge-color-background-primary);\n    color: var(--nile-badge-color-font-primary);\n  }\n\n  .badge--normal {\n    background: var(--nile-badge-color-background-normal);\n  }\n\n  .badge--info {\n    background: var(--nile-badge-color-background-info);\n  }\n\n  /* for v2 */\n  .badge--pink {\n    color: var(--nile-badge-color-font-pink);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);\n    background: var(--nile-badge-color-background-pink);\n  }\n\n  .badge--orange {\n    color: var(--nile-badge-color-font-orange);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);\n    background: var(--nile-badge-color-background-orange);\n  }\n\n  .badge--purple {\n    color: var(--nile-badge-color-font-purple);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);\n    background: var(--nile-badge-color-background-purple);\n  }\n\n  .badge--indigo {\n    color: var(--nile-badge-color-font-indigo);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);\n    background: var(--nile-badge-color-background-indigo);\n  }\n\n  .badge--blue {\n    color: var(--nile-badge-color-font-blue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);\n    background: var(--nile-badge-color-background-blue);\n  }\n  .badge--blue-light {\n    color:var(--nile-badge-color-font-bluelight);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);\n    background: var(--nile-badge-color-background-bluelight);\n  }\n\n  .badge--gray-blue {\n    color: var(--nile-badge-color-font-grayblue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);\n    background: var(--nile-badge-color-background-grayblue);\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);\n    background: var(--nile-badge-color-background-success);\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);\n    background: var(--nile-badge-color-background-warning);\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);\n    background: var(--nile-badge-color-background-error);\n  }\n\n  .badge--brand {\n    color: var(--nile-badge-color-font-brand);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);\n    background: var(--nile-badge-color-background-brand);\n  }\n\n  .badge--gray {\n    color: var(--nile-badge-color-font-gray);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);\n    background: var(--nile-badge-color-background-gray);\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--pill-outline {\n    background: transparent;\n  }\n\n  .badge--rounded {\n    padding: 2px 8px;\n    border-radius: 100px;\n  }\n`;\nexport default [styles];\n"]}
+{"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .badge {\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: var(--nile-height-22px, var(--ng-height-24px));\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .badge--primary {\n    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n  }\n\n  .badge--normal {\n    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n  }\n\n  .badge--info {\n    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n  }\n\n  /* for v2 */\n\n    .badge--pill-outline {\n    background: transparent ;\n  }\n  .badge--pink {\n    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n  }\n\n  .badge--orange {\n    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n  }\n\n  .badge--purple {\n    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n  }\n\n  .badge--indigo {\n    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n  }\n\n  .badge--blue {\n    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n  }\n  .badge--blue-light {\n    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n  }\n\n  .badge--gray-blue {\n    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));\n    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n  }\n\n  .badge--brand {\n    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n  }\n\n  .badge--gray {\n    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));\n    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));\n  }\n\n\n\n  .badge--rounded {\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n`;\nexport default [styles];\n\n"]}

package/dist/src/nile-breadcrumb/nile-breadcrumb.css.js

@@ -12,6 +12,9 @@ export const styles = css `
   :host {
     display: flex;
     align-items: center;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 `;
 export default [styles];

package/dist/src/nile-breadcrumb/nile-breadcrumb.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/nile-breadcrumb.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Breadcrumb CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-breadcrumb.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/nile-breadcrumb.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;CAQxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Breadcrumb CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js

@@ -13,16 +13,19 @@ export const styles = css `
     display: flex;
     align-items: center;
     text-align: center;
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-font-size-small);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: 16.8px;
-    letter-spacing: 0.2px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px; 
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-breadcrumb-item__arrow {
-    margin: 0 8px;
+    margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .nile-breadcrumb-item__arrow-hidden {
@@ -30,16 +33,16 @@ export const styles = css `
   }
 
   .nile-breadcrumb-item__slot-text {
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
   }
 
   .nile-breadcrumb-item__slot-text:hover {
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));
     cursor: pointer;
   }
 
   .nile-breadcrumb-item__last-slot-text {
-    color: var(--nile-breadcrumb-color);
+    color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));
   }
 `;
 export default [styles];

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Breadcrumb-item CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n    text-align: center;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-font-size-small);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: 16.8px;\n    letter-spacing: 0.2px;\n  }\n\n  .nile-breadcrumb-item__arrow {\n    margin: 0 8px;\n  }\n\n  .nile-breadcrumb-item__arrow-hidden {\n    display: none;\n  }\n\n  .nile-breadcrumb-item__slot-text {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: var(--nile-breadcrumb-color);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Breadcrumb-item CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n    text-align: center;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px; \n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-breadcrumb-item__arrow {\n    margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .nile-breadcrumb-item__arrow-hidden {\n    display: none;\n  }\n\n  .nile-breadcrumb-item__slot-text {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.d.ts

@@ -23,6 +23,7 @@ export declare class NileBreadcrumbItem extends NileElement {
      * Render method
      * @slot This is a slot test
      */
+    separator: string;
     private handleClick;
     render(): TemplateResult;
 }

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.js

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html, } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, state, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-breadcrumb-item.css';
 import NileElement from '../internal/nile-element';
@@ -21,6 +21,13 @@ let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
         super(...arguments);
         this.isLast = false;
         /* #endregion */
+        /* #region Methods */
+        /**
+         * Render method
+         * @slot This is a slot test
+         */
+        this.separator = 'arrowright';
+        /* #endregion */
     }
     /**
      * The styles for BreadcrumbItem
@@ -29,12 +36,6 @@ let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
     static get styles() {
         return [styles];
     }
-    /* #endregion */
-    /* #region Methods */
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
     handleClick() {
         if (this.isLast) {
             return;
@@ -51,9 +52,9 @@ let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
         @click=${this.handleClick}
       ></slot>
       <nile-icon
-        name="arrowright"
-        aria-label="arrowright"
-        color="var(--nile-colors-dark-500)"
+        name=${this.separator}
+        aria-label=${this.separator}
+        color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"
         class=${classMap({
             'nile-breadcrumb-item__arrow': true,
             'nile-breadcrumb-item__arrow-hidden': this.isLast,
@@ -66,6 +67,9 @@ let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
 __decorate([
     state()
 ], NileBreadcrumbItem.prototype, "isLast", void 0);
+__decorate([
+    property({ type: String })
+], NileBreadcrumbItem.prototype, "separator", void 0);
 NileBreadcrumbItem = __decorate([
     customElement('nile-breadcrumb-item')
 ], NileBreadcrumbItem);

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb-item.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAY,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QASY,WAAM,GAAG,KAAK,CAAC;QAuChC,gBAAgB;IAClB,CAAC;IAhDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAID,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,iCAAiC,EAAE,CAAC,IAAI,CAAC,MAAM;YAC/C,sCAAsC,EAAE,IAAI,CAAC,MAAM;SACpD,CAAC;iBACO,IAAI,CAAC,WAAW;;;;;;gBAMjB,QAAQ,CAAC;YACf,6BAA6B,EAAE,IAAI;YACnC,oCAAoC,EAAE,IAAI,CAAC,MAAM;SAClD,CAAC;;;KAGL,CAAC;IACJ,CAAC;CAGF,CAAA;AAxCkB;IAAhB,KAAK,EAAE;kDAAwB;AATrB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAiD9B;;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-breadcrumb-item.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile BreadCrumb Item component.\n *\n * @tag nile-breadcrumb-item\n *\n */\n@customElement('nile-breadcrumb-item')\nexport class NileBreadcrumbItem extends NileElement {\n  /**\n   * The styles for BreadcrumbItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @state() private isLast = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  private handleClick() {\n    if (this.isLast) {\n      return;\n    }\n    this.emit('nile-click-item');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot\n        class=${classMap({\n          'nile-breadcrumb-item__slot-text': !this.isLast,\n          'nile-breadcrumb-item__last-slot-text': this.isLast,\n        })}\n        @click=${this.handleClick}\n      ></slot>\n      <nile-icon\n        name=\"arrowright\"\n        aria-label=\"arrowright\"\n        color=\"var(--nile-colors-dark-500)\"\n        class=${classMap({\n          'nile-breadcrumb-item__arrow': true,\n          'nile-breadcrumb-item__arrow-hidden': this.isLast,\n        })}\n        size=\"14\"\n      ></nile-icon>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileBreadcrumbItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-breadcrumb-item': NileBreadcrumbItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-breadcrumb-item.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QASY,WAAM,GAAG,KAAK,CAAC;QAEhC,gBAAgB;QAEhB,qBAAqB;QAErB;;;WAGG;QAEyB,cAAS,GAAG,YAAY,CAAC;QA+BrD,gBAAgB;IAClB,CAAC;IAnDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAeO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,iCAAiC,EAAE,CAAC,IAAI,CAAC,MAAM;YAC/C,sCAAsC,EAAE,IAAI,CAAC,MAAM;SACpD,CAAC;iBACO,IAAI,CAAC,WAAW;;;eAGlB,IAAI,CAAC,SAAS;qBACR,IAAI,CAAC,SAAS;;gBAEnB,QAAQ,CAAC;YACf,6BAA6B,EAAE,IAAI;YACnC,oCAAoC,EAAE,IAAI,CAAC,MAAM;SAClD,CAAC;;;KAGL,CAAC;IACJ,CAAC;CAGF,CAAA;AA3CkB;IAAhB,KAAK,EAAE;kDAAwB;AAWJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0B;AApB1C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAoD9B;;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-breadcrumb-item.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile BreadCrumb Item component.\n *\n * @tag nile-breadcrumb-item\n *\n */\n@customElement('nile-breadcrumb-item')\nexport class NileBreadcrumbItem extends NileElement {\n  /**\n   * The styles for BreadcrumbItem\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @state() private isLast = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  @property({ type: String }) separator = 'arrowright';\n\n  private handleClick() {\n    if (this.isLast) {\n      return;\n    }\n    this.emit('nile-click-item');\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot\n        class=${classMap({\n          'nile-breadcrumb-item__slot-text': !this.isLast,\n          'nile-breadcrumb-item__last-slot-text': this.isLast,\n        })}\n        @click=${this.handleClick}\n      ></slot>\n      <nile-icon\n        name=${this.separator}\n        aria-label=${this.separator}\n        color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\"\n        class=${classMap({\n          'nile-breadcrumb-item__arrow': true,\n          'nile-breadcrumb-item__arrow-hidden': this.isLast,\n        })}\n        size=\"14\"\n      ></nile-icon>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileBreadcrumbItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-breadcrumb-item': NileBreadcrumbItem;\n  }\n}\n"]}