@aquera/nile-elements 0.1.40-beta-1.9 → 0.1.40-beta-2.2

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

@@ -1 +1 @@
-{"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, reflect: true })\n  public size_token = '';\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\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\n    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 \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"]}
+{"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  @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 * {\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\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 \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.d.ts

@@ -66,6 +66,7 @@ export declare class NileIconButton extends NileElement {
     blur(): void;
     private handleMouseOver;
     private handleMouseLeave;
+    private getTokenValueResolved;
     render(): TemplateResult;
 }
 export default NileIconButton;

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

@@ -77,6 +77,14 @@ let NileIconButton = class NileIconButton extends NileElement {
     handleMouseLeave(e) {
         this.ishovered = false;
     }
+    getTokenValueResolved() {
+        const thisValue = this;
+        const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);
+        if (!value) {
+            return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);
+        }
+        return value;
+    }
     render() {
         const isLink = this.href ? true : false;
         const tag = isLink ? literal `a` : literal `button`;
@@ -114,7 +122,7 @@ let NileIconButton = class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="${this.getTokenValueResolved()}"
           ></nile-icon>
         </a>
       `;
@@ -152,7 +160,7 @@ let NileIconButton = class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size_token="var(--nile-width-14px, var(--ng-width-2-5))"
+            size="${this.getTokenValueResolved()}"
           ></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_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"]}
+{"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  private getTokenValueResolved(): any {\n    const thisValue = this; \n  \n    const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);\n    if (!value) {\n      return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);\n    }\n    return value;\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=\"${this.getTokenValueResolved()}\"\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=\"${this.getTokenValueResolved()}\"\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-option/nile-option.css.js

@@ -38,7 +38,7 @@ export const styles = css `
   }
 
   .option--single-select {
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
   .option--hover:not(.option--current):not(.option--disabled),  :host([aria-selected='true']) .option {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\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  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled),  :host([aria-selected='true']) .option {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\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  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled),  :host([aria-selected='true']) .option {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -178,7 +178,7 @@ export const styles = css `
     flex: 1;
     align-items: center;
     flex-wrap: no-wrap;
-    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
   }
@@ -306,7 +306,7 @@ export const styles = css `
   }
 
   .select--medium .select__tags {
-    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));
   }
 
   /* Pills */
@@ -358,7 +358,7 @@ export const styles = css `
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-3px, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {
@@ -385,7 +385,7 @@ export const styles = css `
   }
 
   .select__options__search-enabled {
-    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));
   }
 
   .select__options {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4dxB,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 * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\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  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\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-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\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\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, --ng-font-weight-regular);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n     max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base);\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-22px, var(--ng-height-24px));\n    max-width: var(--nile-width-22px, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-select.css.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4dxB,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 * Select_2 CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);\n    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));\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  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: block;\n    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\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-regular, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .select {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .select::part(popup) {\n    z-index: 9999;\n  }\n\n  .select[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .select[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .select__combobox {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: normal;\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow,\n      150ms background-color;\n  }\n\n  .select__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: inherit;\n    overflow: hidden;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    -webkit-appearance: none;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n\n  .select__display-input::placeholder {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n  }\n\n  .select:not(.select--disabled):hover .select__display-input {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select__display-input:focus {\n    outline: none;\n  }\n\n  /* Visually hide the display input when multiple is enabled */\n  .select--multiple:not(.select--placeholder-visible) .select__display-input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n  }\n\n  .select__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: var(--nile-spacing-none);\n    margin: var(--nile-spacing-none);\n    opacity: 0;\n    z-index: -1;\n  }\n\n  .select__tags {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: no-wrap;\n    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .select__tags-count {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\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\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .select__tags-count-clearable {\n    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  .select__tags::slotted(nile-tag) {\n    cursor: pointer !important;\n  }\n\n  .select--disabled .select__tags,\n  .select--disabled .select__tags::slotted(nile-tag) {\n    cursor: not-allowed !important;\n  }\n\n  /* Standard selects */\n  .select--standard .select__combobox {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n  .select--standard .select__combobox:hover {\n    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));\n  }\n\n  .select--error:hover:not(.select--disabled)  .select__combobox{\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .select--standard.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-primary) );\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-100));\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .select--standard:not(.select--disabled).select--open .select__combobox,\n  .select--standard:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--warning .select__combobox {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .select--error .select__combobox {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n  }\n\n\n\n\n  .select--success {\n    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n  }\n\n  /* Filled selects */\n  .select--filled .select__combobox {\n    border: none;\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  .select--filled:hover:not(.select--disabled) .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .select--filled.select--disabled .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .select--filled:not(.select--disabled).select--open .select__combobox,\n  .select--filled:not(.select--disabled).select--focused .select__combobox {\n    background-color: var(--nile-colors-neutral-100);\n    outline: 3px solid rgba(0, 89, 255, 0.4);\n  }\n\n  .select--medium .select__combobox {\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    box-sizing: border-box;\n  }\n\n  .select--medium .select__clear {\n    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .select--medium .select__prefix::slotted(*) {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium .select__prefix.multiple::slotted(*) {\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select--medium.select--multiple:not(.select--placeholder-visible)\n    .select__combobox {\n    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .select--medium .select__tags {\n    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));\n  }\n\n  /* Pills */\n  .select--pill.select--medium .select__combobox {\n    border-radius: var(--nile-radius-3xl);\n  }\n\n  /* Prefix */\n  .select__prefix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* Clear button */\n  .select__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    border: none;\n    background: none;\n    padding: var(--nile-spacing-none);\n    transition: 150ms color;\n    cursor: pointer;\n  }\n\n  .select__clear:hover {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .select__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .select__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--nile-spacing-3px, var(--ng-spacing-md));\n  }\n\n  .select--open .select__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .select__listbox {\n    display: block;\n    position: relative;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, --ng-font-weight-regular);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n    overflow: auto;\n    overscroll-behavior: none;\n    /* Make sure it adheres to the popup's auto size */\n     max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .select__options__search-enabled {\n    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  .select__options {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    color: rgb(133, 129, 129);\n  }\n\n  .select__listbox::slotted(nile-divider) {\n    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));\n  }\n\n  .select__listbox::slotted(small) {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    color: var(--nile-colors-dark-500);\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .select__search {\n    position: sticky;\n    top: 0px;\n    z-index: 1;\n    width: calc(100% - 16px);\n    padding: var(--nile-spacing-md, var(--ng-spacing-md));\n    background-color: var(--nile-colors-white-base);\n    margin-bottom: -8px;\n  }\n\n  .select__footer {\n    position: sticky;\n    bottom: 0px;\n    background: var(--nile-colors-neutral-100);\n    border: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    height: 15px;\n    /* Auto layout */\n    display:var(--nile-display-flex, var(--ng-display-none));\n    flex-direction: row;\n    align-items: flex-start;\n    padding: var(--nile-spacing-md) var(--nile-spacing-lg)\n      var(--nile-spacing-xl);\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    justify-content: space-between;\n  }\n\n  .tag__prefix[slot='prefix'] {\n    height: 14px;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  .tag__prefix[slot='prefix'] img {\n    max-height: 100%;\n  }\n\n  .select__loader {\n    width: 100%;\n    text-align: center;\n    display: block;\n  }\n\n  .select__loader--icon {\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    animation: spin 0.6s linear infinite;\n  }\n\n  .select__no-results {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .select__invisible {\n    opacity: 0;\n  }\n\n  .select__prefix--from-options {\n    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .select__prefix--from-options img{\n    max-height: var(--nile-height-22px, var(--ng-height-24px));\n    max-width: var(--nile-width-22px, var(--ng-width-6));\n  }\n\n  .select__hide-default {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -25,6 +25,7 @@ export const styles = css `
     user-select: none;
     border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
     gap: var(--nile-spacing-sm , var(--ng-spacing-sm));
+    justify-content: space-between;
   }
 
   .tag__remove::part(base) {
@@ -40,7 +41,7 @@ export const styles = css `
     font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     height: var(--nile-height-26px , var(--ng-height-auto));
     border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
-    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-lg , var(--ng-spacing-md));
+    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-10px , var(--ng-spacing-md));
   }
 
   .tag--primary {
@@ -130,7 +131,7 @@ export const styles = css `
   }
 
   .tag__remove {
-    margin-inline-start: var(--nile-spacing-md , var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));
   }
 
   /*
@@ -149,10 +150,12 @@ export const styles = css `
   font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
 }
 
-  .cross_icon {
-    margin-left: auto;
+  .prefix_content_wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
   }
-
 `;
 export default [styles];
 //# sourceMappingURL=nile-tag.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJxB,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 * Tag CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\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  .tag {\n    display: flex;\n    align-items: center;\n    border: solid 2px;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));\n    gap: var(--nile-spacing-sm , var(--ng-spacing-sm));\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: var(--nile-spacing-none , var(--ng-spacing-none));\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--medium {\n    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    height: var(--nile-height-26px , var(--ng-height-auto));\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));\n    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-lg , var(--ng-spacing-md));\n  }\n\n  .tag--primary {\n    background: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    color: var(--nile-colors-white-base);\n  }\n\n  .tag--primary:hover {\n    border: 2px solid rgba(0, 94, 166, 0.50);\n  }\n\n  .tag--primary:active > nile-icon-button {\n    color: var(--nile-colors-blue-700);\n  }\n\n  .tag--success {\n    background: var(--nile-colors-green-400);\n    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--success:hover {\n    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--success:active > nile-icon-button {\n    color: var(--nile-colors-green-700);\n  }\n\n  .tag--normal {\n    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));\n  }\n  \n  .tag--normal:hover {\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));\n  }\n\n  .tag--normal:active > nile-icon-button {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .tag--warning {\n    background: var(--nile-colors-yellow-400);\n    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--warning:hover {\n    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--warning:active > nile-icon-button {\n    color: var(--nile-colors-yellow-500);\n  }\n\n\n  .tag--error {\n    background: var(--nile-colors-red-400);\n    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--error:hover {\n    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--error:active > nile-icon-button {\n    color: var(--nile-colors-red-500);\n  }\n\n  .tag--info {\n    background: var(--nile-colors-blue-400);\n    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--info:hover {\n    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--info:active > nile-icon-button {\n    color: var(--nile-colors-red-500);\n  }\n\n  .tag__remove {\n    margin-inline-start: var(--nile-spacing-md , var(--ng-spacing-md));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: var(--nile-radius-full , var(--ng-spacing-8xl));\n  }\n\n  .tag__prefix {\n  padding: var(--nile-spacing-xs , var(--ng-spacing-xs)) var(--nile-spacing-sm , var(--ng-spacing-sm));\n}\n\n .tag__content {\n  font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n}\n\n  .cross_icon {\n    margin-left: auto;\n  }\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tag.css.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,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 * Tag CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\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  .tag {\n    display: flex;\n    align-items: center;\n    border: solid 2px;\n    line-height: 1;\n    white-space: nowrap;\n    user-select: none;\n    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));\n    gap: var(--nile-spacing-sm , var(--ng-spacing-sm));\n    justify-content: space-between;\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: var(--nile-spacing-none , var(--ng-spacing-none));\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--medium {\n    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n    height: var(--nile-height-26px , var(--ng-height-auto));\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));\n    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-10px , var(--ng-spacing-md));\n  }\n\n  .tag--primary {\n    background: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    color: var(--nile-colors-white-base);\n  }\n\n  .tag--primary:hover {\n    border: 2px solid rgba(0, 94, 166, 0.50);\n  }\n\n  .tag--primary:active > nile-icon-button {\n    color: var(--nile-colors-blue-700);\n  }\n\n  .tag--success {\n    background: var(--nile-colors-green-400);\n    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--success:hover {\n    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--success:active > nile-icon-button {\n    color: var(--nile-colors-green-700);\n  }\n\n  .tag--normal {\n    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));\n  }\n  \n  .tag--normal:hover {\n    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));\n  }\n\n  .tag--normal:active > nile-icon-button {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .tag--warning {\n    background: var(--nile-colors-yellow-400);\n    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--warning:hover {\n    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--warning:active > nile-icon-button {\n    color: var(--nile-colors-yellow-500);\n  }\n\n\n  .tag--error {\n    background: var(--nile-colors-red-400);\n    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--error:hover {\n    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--error:active > nile-icon-button {\n    color: var(--nile-colors-red-500);\n  }\n\n  .tag--info {\n    background: var(--nile-colors-blue-400);\n    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--info:hover {\n    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));\n  }\n\n  .tag--info:active > nile-icon-button {\n    color: var(--nile-colors-red-500);\n  }\n\n  .tag__remove {\n    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: var(--nile-radius-full , var(--ng-spacing-8xl));\n  }\n\n  .tag__prefix {\n  padding: var(--nile-spacing-xs , var(--ng-spacing-xs)) var(--nile-spacing-sm , var(--ng-spacing-sm));\n}\n\n .tag__content {\n  font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n}\n\n  .prefix_content_wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 6px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tag/nile-tag.js

@@ -96,9 +96,10 @@ let NileTag = class NileTag extends NileElement {
             'tag--removable': this.removable,
         })}
       >
-        <slot name="prefix" part="prefix" class="tag__prefix"></slot>
-
-        <slot part="content" class="tag__content"></slot>
+        <div class="prefix_content_wrapper" part="prefix_content_wrapper">
+          <slot name="prefix" part="prefix" class="tag__prefix"></slot>
+          <slot part="content" class="tag__content"></slot>
+        </div>
 
         ${this.removable
             ? html `

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

@@ -1 +1 @@
-{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.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} from 'lit';\nimport { styles } from './nile-tag.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-tag\n *\n */\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The tag's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-tag')\nexport class NileTag extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The tag's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info' = 'normal';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('nile-remove');\n  }\n  \n  getCloseButtonColor() {\n    let primaryColor;\n    switch (this.variant) {\n      case 'primary':\n        primaryColor = '--nile-colors-blue-500';\n        break;\n      case 'success':\n        primaryColor = '--nile-colors-green-500';\n        break;\n      case 'normal':\n        primaryColor = '--nile-colors-dark-500';\n        break;\n      case 'warning':\n        primaryColor = '--nile-colors-yellow-500';\n        break;\n      case 'error':\n        primaryColor = '--nile-colors-red-500';\n        break;\n      case 'info':\n        primaryColor = '--nile-colors-blue-500';\n        break;\n      default:\n        primaryColor = '--nile-colors-dark-500';\n    }\n    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;\n  }\n  \n  render() {\n    const colorVariable = this.getCloseButtonColor();\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Types\n          'tag--primary': this.variant === 'primary',\n          'tag--success': this.variant === 'success',\n          'tag--normal': this.variant === 'normal',\n          'tag--warning': this.variant === 'warning',\n          'tag--error': this.variant === 'error',\n          'tag--info': this.variant === 'info',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--pill': this.pill,\n          'tag--removable': this.removable,\n\n        })}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"tag__prefix\"></slot>\n\n        <slot part=\"content\" class=\"tag__content\"></slot>\n\n        ${this.removable\n          ? html`\n              <nile-icon-button\n                part=\"remove-button\"\n                exportparts=\"base:remove-button__base\"\n                name=\"close\"\n                library=\"system\"\n                label=\"remove\"\n                class=\"tag__remove cross_icon\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n                 color=${this.getCloseButtonColor()}\n              ></nile-icon-button>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n\nexport default NileTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tag': NileTag;\n  }\n}\n"]}
+{"version":3,"file":"nile-tag.js","sourceRoot":"","sources":["../../../src/nile-tag/nile-tag.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} from 'lit';\nimport { styles } from './nile-tag.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-tag\n *\n */\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The tag's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-tag')\nexport class NileTag extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The tag's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info' = 'normal';\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('nile-remove');\n  }\n  \n  getCloseButtonColor() {\n    let primaryColor;\n    switch (this.variant) {\n      case 'primary':\n        primaryColor = '--nile-colors-blue-500';\n        break;\n      case 'success':\n        primaryColor = '--nile-colors-green-500';\n        break;\n      case 'normal':\n        primaryColor = '--nile-colors-dark-500';\n        break;\n      case 'warning':\n        primaryColor = '--nile-colors-yellow-500';\n        break;\n      case 'error':\n        primaryColor = '--nile-colors-red-500';\n        break;\n      case 'info':\n        primaryColor = '--nile-colors-blue-500';\n        break;\n      default:\n        primaryColor = '--nile-colors-dark-500';\n    }\n    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;\n  }\n  \n  render() {\n    const colorVariable = this.getCloseButtonColor();\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Types\n          'tag--primary': this.variant === 'primary',\n          'tag--success': this.variant === 'success',\n          'tag--normal': this.variant === 'normal',\n          'tag--warning': this.variant === 'warning',\n          'tag--error': this.variant === 'error',\n          'tag--info': this.variant === 'info',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--pill': this.pill,\n          'tag--removable': this.removable,\n\n        })}\n      >\n        <div class=\"prefix_content_wrapper\" part=\"prefix_content_wrapper\">\n          <slot name=\"prefix\" part=\"prefix\" class=\"tag__prefix\"></slot>\n          <slot part=\"content\" class=\"tag__content\"></slot>\n        </div>\n\n        ${this.removable\n          ? html`\n              <nile-icon-button\n                part=\"remove-button\"\n                exportparts=\"base:remove-button__base\"\n                name=\"close\"\n                library=\"system\"\n                label=\"remove\"\n                class=\"tag__remove cross_icon\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n                 color=${this.getCloseButtonColor()}\n              ></nile-icon-button>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n\nexport default NileTag;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tag': NileTag;\n  }\n}\n"]}