@aquera/nile-elements 0.1.39 → 0.1.40-beta-1.1

package/dist/src/nile-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,KAAK,KAAK,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAS,YAAY,CAAC;AAUzC,MAAM,SAAS,GAAc,KAAkB,CAAC;AAEhD,MAAM,eAAe,GAAG,EAAE,CAAC;AAC3B,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACL;;;;WAIG;QAEI,QAAG,GAAY,OAAO,CAAC;QAU9B;;;WAGG;QAEI,gBAAW,GAAG,EAAE,CAAC;QAGjB,WAAM,GAAG,MAAM,CAAC;QASvB;;;WAGG;QAEI,SAAI,GAAG,eAAe,CAAC;QAGtB,SAAI,GAAG,EAAE,CAAC;QAEmB,UAAK,GAAG,QAAQ,CAAC;QAQ/C,SAAI,GAAG,KAAK,CAAC;IA6KtB,CAAC;IAjIS,YAAY;QAClB,OAAO,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;IAC3E,CAAC;IAEkB,KAAK,CAAC,OAAO,CAC9B,iBAAiC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;YAC9D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC7D,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YAC5E,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;YAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;YACtC,IAAI,QAAQ,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;YACxC,CAAC;iBAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC9B,IAAI,CAAC,IAAI,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACtD,CAAC;iBAAM,CAAC;gBACN,mDAAmD;YACrD,CAAC;QACH,CAAC;QACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACjD,MAAM,KAAK,GAAG,GAAG,EAAE,UAAU,CAAA;QAC7B,IAAG,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAAC,CAAC;YAChC,GAAG,EAAE,YAAY,CAAC,OAAO,EAAC,4BAA4B,CAAC,CAAC;QAC1D,CAAC;QACD,IAAG,CAAC,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,EAAC,CAAC;YAClC,GAAG,EAAE,YAAY,CAAC,SAAS,EAAC,KAAK,CAAC,CAAA;QACpC,CAAC;QACD,IAAG,IAAI,CAAC,KAAK,EAAC,CAAC;YACb,GAAG,EAAE,YAAY,CAAC,SAAS,EAAC,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;QAChE,CAAC;aACI,IAAG,CAAC,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,EAAC,CAAC;YACvC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK;gBAC/B,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;gBACnC,CAAC,CAAC,WAAW,CAAC;YACd,GAAG,EAAE,YAAY,CAAC,SAAS,EAAC,YAAY,CAAC,CAAA;QAC3C,CAAC;QAED,IAAG,CAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,EAAC,CAAC;YACjC,GAAG,EAAE,YAAY,CAAC,QAAQ,EAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAC9C,GAAG,EAAE,YAAY,CAAC,OAAO,EAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/C,CAAC;QAED,GAAG,EAAE,YAAY,CAAC,aAAa,EAAC,GAAG,IAAI,CAAC,WAAW,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9D,GAAG,EAAE,YAAY,CAAC,YAAY,EAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;QAEvD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,GAAU,EAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAA;QAE1G,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU,EAAC,GAAG,iBAAiB,CAAC,CAAA;IACrD,CAAC;IAEO,KAAK,CAAC,QAAQ,CAAC,IAAY;QACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,uBAAuB,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;QAC5D,CAAC;QAED,OAAO,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAC/B,CAAC;IAEO,aAAa,CAAC,QAAgB;QACpC,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACpC,CAAC;IAEO,cAAc;QACpB,MAAM,kBAAkB,GAAE,cAAc,CAAC;QACzC,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;QAC/D,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAC,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,EAAC,EAAE,CAAC,CAAA;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAChC,kBAAkB,EACjB,EAAE,CACH;aACA,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACtB,OAAQ;;;;wBAIY,QAAQ;;wBAER,OAAO;2BACJ,CAAA;IACzB,CAAC;IAED,IAAI,cAAc;QAChB,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,MAAM;YAC/B,gBAAgB,EAAE,IAAI,CAAC,IAAI;SACV,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEzB;;WAEG;QACH,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK;YAC7B,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;YACnC,CAAC,CAAC,WAAW,CAAC;QAGhB,IACE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;YACtE,CAAC,IAAI,CAAC,KAAK,EACX,CAAC;YACD,8FAA8F;YAC9F,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,6BAA6B,CAAC,CAAC;QAE3E,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACtB,+EAA+E;YAC/E,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC7D,CAAC;QAED,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;UACjD,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;;KAErC,CAAA;IACH,CAAC;;AApKe,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkC3B,AAlCqB,CAkCpB;AAvFK;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACZ;AAQvB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACrB;AAOd;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAClB;AAGjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACnB;AAOhB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACG;AAOvB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACZ;AAGtB;IADP,KAAK,EAAE;sCACU;AAEmB;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAA2B;AAKzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAa;AAGlC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACR;AAMS;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAY;AA1D7B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiOpB","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport * as Icons from './icons/svg';\nimport { aliasMap }    from './aliasmap';\n\ninterface IconPaths {\n  [key: string]: string;\n}\n\ninterface ButtonClassMap {\n  [key:string]: boolean;\n}\n\nconst iconPaths: IconPaths = Icons as IconPaths;\n\nconst SMALL_ICON_SIZE = 16;\nconst LARGE_ICON_SIZE = 24;\n\n/**\n * Nile icon component.\n *\n * @tag nile-icon\n *\n */\n@customElement('nile-icon')\nexport class NileIcon extends LitElement {\n  /**\n   * The name of the icon set\n   * @attr icon set\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public set?: string = 'local';\n\n  /**\n   * The name of the icon\n   * @attr name\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public name?: string;\n\n  /**\n   * A description of what the icon represents\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  public description = '';\n\n  @property({ type: String, reflect: true })\n  public method = 'fill';\n\n  /**\n   * A path to a custom SVG file to display as the icon\n   * @attr customSvgPath\n   */\n  @property({ type: String })\n  public customSvgPath?: string;\n\n  /**\n   * A size of what the icon represents\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  public size = SMALL_ICON_SIZE;\n\n  @state()\n  private _svg = '';\n\n  @property({ type: String }) override title = 'agents';\n\n  /**\n   * Color\n   */\n  @property({ reflect: true }) color: any ;\n\n  @property({ type: Boolean })\n  public push = false;\n\n  /**\n   * Retain Viewbox\n   */\n\n  @property({ reflect: true }) frame: any;\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      contain: content;\n      --nile-svg-stroke-width: 1.3;\n    }\n\n    .nds-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .nds-icon svg {\n      height: var(--nile-svg-height);\n      width: var(--nile-svg-width);\n      stroke: var(--nile-svg-stroke);\n    }\n\n    .nds-icon svg path {\n      fill: var(--nile-svg-fill);\n    }\n\n    .stroke svg path {\n      fill: none !important;\n      stroke: var(--nile-svg-fill) !important;\n      stroke-width: var(--nile-svg-stroke-width);\n    }\n\n    .nds-icon--push {\n      margin-right: 12px;\n    }\n  `;\n\n  private _getIconSize(): number {\n    return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;\n  }\n\n  protected override async updated(\n    changedProperties: PropertyValues\n  ): Promise<void> {\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--nile-svg-height', `${this.size}px`);\n      this.style.setProperty('--nile-svg-width', `${this.size}px`);\n    }\n    if (changedProperties.has('color')) {\n      this.style.setProperty('--nile-svg-fill', `${this.color}`);\n    }\n    if (changedProperties.has('name') || changedProperties.has('customSvgPath')) {\n      const raw = this.name?.replace(/-/g, '') ?? '';\n      const iconName = aliasMap[raw] || raw;\n      if (iconName && iconPaths[iconName]) {\n        this._svg = atob(iconPaths[iconName]);\n      } else if (this.customSvgPath) {\n        this._svg = await this.fetchSvg(this.customSvgPath);\n      } else {\n        // throw new Error(`No icon named \"${this.name}\"`);\n      }\n    }\n    this.addAttributesToSvg();\n  }\n\n  private addAttributesToSvg(){\n    const svg = this.renderRoot.querySelector('#svg')\n    const attrs = svg?.attributes\n    if(!attrs?.getNamedItem('xmlns')){\n      svg?.setAttribute('xmlns',\"http://www.w3.org/2000/svg\");\n    }\n    if(!attrs?.getNamedItem('version')){\n      svg?.setAttribute(\"version\",\"1.1\")\n    }\n    if(this.frame){\n      svg?.setAttribute('viewBox',`0 0 ${this.frame} ${this.frame}`)\n    }\n    else if(!attrs?.getNamedItem('viewBox')){\n      const viewboxLogic = this.frame\n      ? `0 0 ${this.frame} ${this.frame}`\n      : '0 0 16 16';\n      svg?.setAttribute('viewBox',viewboxLogic)\n    }\n\n    if(!attrs?.getNamedItem('height')){\n      svg?.setAttribute('height',String(this.size));\n      svg?.setAttribute('width',String(this.size));\n    }\n\n    svg?.setAttribute('aria-hidden',`${this.description === ''}`);\n    svg?.setAttribute('aria-label',this.description || '');\n\n    const additionalClasses = Object.keys(this.buttonClassMap).filter((key:string)=> this.buttonClassMap[key])\n\n    svg?.classList.add('nds-icon',...additionalClasses)\n  }\n\n  private async fetchSvg(path: string): Promise<string> {\n    const response = await fetch(path);\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    return await response.text();\n  }\n\n  private removeHyphens(iconName: string) {\n    return iconName.replace(/-/g, '');\n  }\n\n  private getSvgTemplate(){\n    const svgTagRegexPattern =/<svg\\s[^>]*>/;\n    const regexToGetSVGAttrs = this._svg.match(svgTagRegexPattern);\n    const svgAttrs = regexToGetSVGAttrs?.[0].replace('<svg','').replace('>','')\n    const svgBody = this._svg.replace(\n     svgTagRegexPattern,\n      ''\n    )\n    .replace('</svg>', '')\n    return  `<svg\n                      id='svg'\n                      focusable='true'\n                      role='img'\n                      ${svgAttrs}\n                    >\n                      ${svgBody}\n                    </svg>`\n  }\n\n  get buttonClassMap() {\n    return {\n      'stroke': this.method != 'fill' ,\n      'nds-icon--push': this.push,\n    } as ButtonClassMap;\n  }\n\n  protected override render(): TemplateResult {\n    const size = this.size;\n    const color = this.color;\n\n    /**\n     * When icons are outside frame\n     */\n    const viewboxLogic = this.frame\n      ? `0 0 ${this.frame} ${this.frame}`\n      : '0 0 16 16';\n\n\n    if (\n      (!this._svg.includes('fill=') || this._svg.includes('fill=\"inherit\"')) &&\n      !this.color\n    ) {\n      // Case 1: _svg does not have fill color or has fill=\"inherit\" and this.color is not mentioned\n      this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500)`);\n\n    } else if (this.color) {\n      // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color\n      this.style.setProperty('--nile-svg-fill', `${this.color}`);\n    }\n\n    return html`\n      <span class=\"nds-icon ${classMap(this.buttonClassMap)}\">\n        ${unsafeSVG(this.getSvgTemplate())}\n      </span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon': NileIcon;\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-icon/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { TemplateResult } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport * as Icons from './icons/svg';\nimport { aliasMap }    from './aliasmap';\n\ninterface IconPaths {\n  [key: string]: string;\n}\n\ninterface ButtonClassMap {\n  [key:string]: boolean;\n}\n\nconst iconPaths: IconPaths = Icons as IconPaths;\n\nconst SMALL_ICON_SIZE = 16;\nconst LARGE_ICON_SIZE = 24;\n\n/**\n * Nile icon component.\n *\n * @tag nile-icon\n *\n */\n@customElement('nile-icon')\nexport class NileIcon extends LitElement {\n  /**\n   * The name of the icon set\n   * @attr icon set\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public set?: string = 'local';\n\n  /**\n   * The name of the icon\n   * @attr name\n   * @type {IconName | undefined}\n   */\n  @property({ type: String, reflect: true })\n  public name?: string;\n\n  /**\n   * A description of what the icon represents\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  public description = '';\n\n  @property({ type: String, reflect: true })\n  public method = 'fill';\n\n  /**\n   * A path to a custom SVG file to display as the icon\n   * @attr customSvgPath\n   */\n  @property({ type: String })\n  public customSvgPath?: string;\n\n  /**\n   * A size of what the icon represents\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  public size = SMALL_ICON_SIZE;\n\n  @property({ type: String })\n  public size_token = `${SMALL_ICON_SIZE}px`;\n\n  @state()\n  private _svg = '';\n\n  @property({ type: String }) override title = 'agents';\n\n  /**\n   * Color\n   */\n  @property({ reflect: true }) color: any ;\n\n  @property({ type: Boolean })\n  public push = false;\n\n  @property({ type: Boolean })\n  public noFill = false;\n\n  /**\n   * Retain Viewbox\n   */\n\n  @property({ reflect: true }) frame: any;\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      contain: content;\n      --nile-svg-stroke-width: 1.3;\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    .nds-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .nds-icon svg {\n      height: var(--nile-svg-height);\n      width: var(--nile-svg-width);\n      stroke: var(--nile-svg-stroke);\n    }\n\n    .nds-icon svg path {\n      fill: var(--nile-svg-fill);\n    }\n\n    .nds-icon.no-fill svg path {\n      fill: revert-layer;\n    }\n\n    .stroke svg path {\n      fill: none !important;\n      stroke: var(--nile-svg-fill) !important;\n      stroke-width: var(--nile-svg-stroke-width);\n    }\n\n    .nds-icon--push {\n      margin-right: var(--nile-spacing-lg);\n    }\n  `;\n\n  private _getIconSize(): number {\n    return this.name?.endsWith('-small') ? SMALL_ICON_SIZE : LARGE_ICON_SIZE;\n  }\n\n  protected override async updated(\n    changedProperties: PropertyValues\n  ): Promise<void> {\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--nile-svg-height', `${this.size}px`);\n      this.style.setProperty('--nile-svg-width', `${this.size}px`);\n    }\n    else if (changedProperties.has('size_token')) {\n      this.style.setProperty('--nile-svg-height', `${this.size_token}`);\n      this.style.setProperty('--nile-svg-width', `${this.size_token}`);\n    }\n    if (changedProperties.has('color')) {\n      this.style.setProperty('--nile-svg-fill', `${this.color}`);\n    }\n    if (changedProperties.has('name') || changedProperties.has('customSvgPath')) {\n      const raw = this.name?.replace(/-/g, '') ?? '';\n      const iconName = aliasMap[raw] || raw;\n      if (iconName && iconPaths[iconName]) {\n        this._svg = atob(iconPaths[iconName]);\n      } else if (this.customSvgPath) {\n        this._svg = await this.fetchSvg(this.customSvgPath);\n      } else {\n        // throw new Error(`No icon named \"${this.name}\"`);\n      }\n    }\n    this.addAttributesToSvg();\n  }\n\n  private addAttributesToSvg(){\n    const svg = this.renderRoot.querySelector('#svg')\n    const attrs = svg?.attributes\n    if(!attrs?.getNamedItem('xmlns')){\n      svg?.setAttribute('xmlns',\"http://www.w3.org/2000/svg\");\n    }\n    if(!attrs?.getNamedItem('version')){\n      svg?.setAttribute(\"version\",\"1.1\")\n    }\n    if(this.frame){\n      svg?.setAttribute('viewBox',`0 0 ${this.frame} ${this.frame}`)\n    }\n    else if(!attrs?.getNamedItem('viewBox')){\n      const viewboxLogic = this.frame\n      ? `0 0 ${this.frame} ${this.frame}`\n      : '0 0 16 16';\n      svg?.setAttribute('viewBox',viewboxLogic)\n    }\n\n    if(!attrs?.getNamedItem('height')){\n      svg?.setAttribute('height',String(this.size));\n      svg?.setAttribute('width',String(this.size));\n    }\n\n    svg?.setAttribute('aria-hidden',`${this.description === ''}`);\n    svg?.setAttribute('aria-label',this.description || '');\n\n    const additionalClasses = Object.keys(this.buttonClassMap).filter((key:string)=> this.buttonClassMap[key])\n\n    svg?.classList.add('nds-icon',...additionalClasses)\n  }\n\n  private async fetchSvg(path: string): Promise<string> {\n    const response = await fetch(path);\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    return await response.text();\n  }\n\n  private removeHyphens(iconName: string) {\n    return iconName.replace(/-/g, '');\n  }\n\n  private getSvgTemplate(){\n    const svgTagRegexPattern =/<svg\\s[^>]*>/;\n    const regexToGetSVGAttrs = this._svg.match(svgTagRegexPattern);\n    const svgAttrs = regexToGetSVGAttrs?.[0].replace('<svg','').replace('>','')\n    const svgBody = this._svg.replace(\n     svgTagRegexPattern,\n      ''\n    )\n    .replace('</svg>', '')\n    return  `<svg\n                      id='svg'\n                      focusable='true'\n                      role='img'\n                      ${svgAttrs}\n                    >\n                      ${svgBody}\n                    </svg>`\n  }\n\n  get buttonClassMap() {\n    return {\n      'stroke': this.method != 'fill' ,\n      'nds-icon--push': this.push,\n      'no-fill': this.noFill,\n    } as ButtonClassMap;\n  }\n\n  protected override render(): TemplateResult {\n    const size = this.size;\n    const color = this.color;\n\n    /**\n     * When icons are outside frame\n     */\n    const viewboxLogic = this.frame\n      ? `0 0 ${this.frame} ${this.frame}`\n      : '0 0 16 16';\n\n\n    if (\n      (!this._svg.includes('fill=') || this._svg.includes('fill=\"inherit\"')) &&\n      !this.color\n    ) {\n      // Case 1: _svg does not have fill color or has fill=\"inherit\" and this.color is not mentioned\n      this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500,var(--ng-colors-fg-secondary-700))`);\n\n    } else if (this.color) {\n      // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color\n     this.style.setProperty('--nile-svg-fill', `${this.color}`);\n    }\n\n    return html`\n      <span class=\"nds-icon ${classMap(this.buttonClassMap)}\">\n        ${unsafeSVG(this.getSvgTemplate())}\n      </span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon': NileIcon;\n  }\n}\n"]}

package/dist/src/nile-icon-button/nile-icon-button.css.js

@@ -11,7 +11,10 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
-    color: hsl(240 5.2% 33.9%);
+    color:  var(--nile-colors-neutral-700);
+    -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));
   }
 
   .icon-button {
@@ -20,10 +23,10 @@ export const styles = css `
     align-items: center;
     background: none;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--nile-radius-sm);
     font-size: inherit;
     color: inherit;
-    padding: 0.5rem;
+    padding: var(--nile-radius-md);
     cursor: pointer;
     transition: 50ms;
     -webkit-appearance: none;
@@ -31,7 +34,7 @@ export const styles = css `
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: hsl(200.4 98% 39.4%);
+    color: var(--nile-colors-blue-500)
   }
 
   .icon-button:active:not(.icon-button--disabled) {

package/dist/src/nile-icon-button/nile-icon-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-icon-button.css.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CxB,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 * IconButton CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .icon-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background: none;\n    border: none;\n    border-radius: 0.25rem;\n    font-size: inherit;\n    color: inherit;\n    padding: 0.5rem;\n    cursor: pointer;\n    transition: 50ms;\n    -webkit-appearance: none;\n  }\n\n  .icon-button:hover:not(.icon-button--disabled),\n  .icon-button:focus-visible:not(.icon-button--disabled) {\n    color: hsl(200.4 98% 39.4%);\n  }\n\n  .icon-button:active:not(.icon-button--disabled) {\n    color: hsl(201.3 96.3% 32.2%);\n  }\n\n  .icon-button:focus {\n    outline: none;\n  }\n\n  .icon-button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .icon-button:focus-visible {\n    outline: hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .icon-button__icon {\n    pointer-events: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-icon-button.css.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,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 * IconButton CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    color:  var(--nile-colors-neutral-700);\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  .icon-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background: none;\n    border: none;\n    border-radius: var(--nile-radius-sm);\n    font-size: inherit;\n    color: inherit;\n    padding: var(--nile-radius-md);\n    cursor: pointer;\n    transition: 50ms;\n    -webkit-appearance: none;\n  }\n\n  .icon-button:hover:not(.icon-button--disabled),\n  .icon-button:focus-visible:not(.icon-button--disabled) {\n    color: var(--nile-colors-blue-500)\n  }\n\n  .icon-button:active:not(.icon-button--disabled) {\n    color: hsl(201.3 96.3% 32.2%);\n  }\n\n  .icon-button:focus {\n    outline: none;\n  }\n\n  .icon-button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .icon-button:focus-visible {\n    outline: hsl(200.4 98% 39.4%);\n    outline-offset: 1px;\n  }\n\n  .icon-button__icon {\n    pointer-events: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-icon-button/nile-icon-button.js

@@ -114,7 +114,7 @@ let NileIconButton = class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="14"
+            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
           ></nile-icon>
         </a>
       `;
@@ -152,7 +152,7 @@ let NileIconButton = class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="14"
+            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
           ></nile-icon>
         </button>
       `;

package/dist/src/nile-icon-button/nile-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-icon-button.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.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  CSSResultArray,\n  TemplateResult,\n  html,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-icon-button.css';\n\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @event nile-blur - Emitted when the icon button loses focus.\n * @event nile-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\n/**\n * Nile icon component.\n *\n * @tag nile-icon-button\n *\n */\n@customElement('nile-icon-button')\nexport class NileIconButton extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**Default color to icon */\n  @property({ type: String, reflect: true }) color?: string;\n\n  @property({ type: Boolean, reflect: true }) ishovered: boolean = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  private handleMouseOver(e: any) {\n    this.ishovered = true;\n  }\n  private handleMouseLeave(e: any) {\n    this.ishovered = false;\n  }\n\n  render(): TemplateResult {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    if(isLink){\n      return html`\n        <a\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size=\"14\"\n          ></nile-icon>\n        </a>\n      `;\n    }\n    else{\n      return html`\n        <button\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size=\"14\"\n          ></nile-icon>\n        </button>\n      `;\n    }\n  }\n}\n\nexport default NileIconButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon-button': NileIconButton;\n  }\n}\n"]}
+{"version":3,"file":"nile-icon-button.js","sourceRoot":"","sources":["../../../src/nile-icon-button/nile-icon-button.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  CSSResultArray,\n  TemplateResult,\n  html,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-icon-button.css';\n\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @event nile-blur - Emitted when the icon button loses focus.\n * @event nile-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\n/**\n * Nile icon component.\n *\n * @tag nile-icon-button\n *\n */\n@customElement('nile-icon-button')\nexport class NileIconButton extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property() name?: string;\n\n  /** The name of a registered custom icon library. */\n  @property() library?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @property() download?: string;\n\n  /**\n   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label\n   * that describes what the icon button does.\n   */\n  @property() label = '';\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**Default color to icon */\n  @property({ type: String, reflect: true }) color?: string;\n\n  @property({ type: Boolean, reflect: true }) ishovered: boolean = false;\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /** Simulates a click on the icon button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the icon button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the icon button. */\n  blur() {\n    this.button.blur();\n  }\n\n  private handleMouseOver(e: any) {\n    this.ishovered = true;\n  }\n  private handleMouseLeave(e: any) {\n    this.ishovered = false;\n  }\n\n  render(): TemplateResult {\n    const isLink = this.href ? true : false;\n    const tag = isLink ? literal`a` : literal`button`;\n    /* eslint-disable lit/binding-positions, lit/no-invalid-html */\n    if(isLink){\n      return html`\n        <a\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size_token=\"var(--nile-width-14px, var(--ng-width-2-5))\"\n          ></nile-icon>\n        </a>\n      `;\n    }\n    else{\n      return html`\n        <button\n          part=\"base\"\n          class=${classMap({\n            'icon-button': true,\n            'icon-button--disabled': !isLink && this.disabled,\n            'icon-button--focused': this.hasFocus,\n          })}\n          .disabled=${isLink}\n          type=${ifDefined(isLink ? undefined : 'button')}\n          href=${ifDefined(isLink ? this.href : undefined)}\n          target=${ifDefined(isLink ? this.target : undefined)}\n          download=${ifDefined(isLink ? this.download : undefined)}\n          rel=${ifDefined(\n            isLink && this.target ? 'noreferrer noopener' : undefined\n          )}\n          role=${ifDefined(isLink ? undefined : 'button')}\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          aria-label=\"${this.label}\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n          @mouseover=${this.handleMouseOver}\n          @mouseleave=${this.handleMouseLeave}\n        >\n      \n          <nile-icon\n            class=\"icon-button__icon\"\n            name=${ifDefined(this.name)}\n            library=${ifDefined(this.library)}\n            src=${ifDefined(this.src)}\n            .color=${this.color}\n            aria-hidden=\"true\"\n            size_token=\"var(--nile-width-14px, var(--ng-width-2-5))\"\n          ></nile-icon>\n        </button>\n      `;\n    }\n  }\n}\n\nexport default NileIconButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-icon-button': NileIconButton;\n  }\n}\n"]}

package/dist/src/nile-inline-edit/nile-inline-edit.css.js

@@ -11,43 +11,49 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
+    -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));
   }
 
   .inline__edit--label {
-    color: var(--nile-inline-edit-label-font-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
-    line-height: 20px;
-    margin-bottom: 6px;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    margin-bottom: var(--nile-spacing-sm);
   }
 
   .inline__edit--open--container {
     display: block;
-    width: var(--nile-width-width-xxs);
+    width: var(--nile-width-width-xxs, var(--ng-spacing-80));
     box-sizing: border-box;
   }
 
   .inline__edit--container {
     box-sizing: border-box;
-    width: var(--nile-width-width-xxs);
-    min-width: var(--nile-width-width-xxs);
-    min-height: 40px;
+    width: var(--nile-width-width-xxs, var(--ng-width-80));
+    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
+    min-height: var(--nile-height-40px, var(--ng-height-40px));
     height: auto;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
-    border-radius: var(--nile-radius-radius-xs);
-    color: var(--nile-inline-edit-font-color);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-4);
+    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));
+    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
+    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-spacing-spacing-3xl);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
     word-wrap: break-word;
   }
 
   .inline__edit--container:hover {
-    background-color:var(--nile-inline-edit-hover-background-color);
+    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
   }
 `;
 export default [styles];

package/dist/src/nile-inline-edit/nile-inline-edit.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-edit.css.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCxB,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 * InlineEdit CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium);\n    line-height: 20px;\n    margin-bottom: 6px;\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs);\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs);\n    min-width: var(--nile-width-width-xxs);\n    min-height: 40px;\n    height: auto;\n    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);\n    border-radius: var(--nile-radius-radius-xs);\n    color: var(--nile-inline-edit-font-color);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-spacing-spacing-3xl);\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-inline-edit.css.js","sourceRoot":"","sources":["../../../src/nile-inline-edit/nile-inline-edit.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CxB,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 * InlineEdit CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n`;\n\nexport default [styles];\n"]}