@aquera/nile-elements 0.1.47-beta-1.3 → 0.1.47-beta-1.5

package/dist/src/nile-table-body/nile-table-body.css.js

@@ -11,16 +11,19 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
-    --nile-table-background--odd: var(--nile-colors-base-white);
-    --nile-table-background--even: var(--nile-colors-base-white);
+    --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .base {
-    background-color: var(--nile-colors-white-base);
-    border: 1px solid var(--nile-table-row-border-color);
-    border-radius: var(--nile-radius-radius-xl);
-    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md , var(--ng-radius-xl));
     overflow: hidden;
+    box-shadow: var(--nile-box-shadow-3 , var(--ng-shadow-xs));
   }
 
   .table__header {
@@ -35,7 +38,7 @@ export const styles = css `
   }
 
   slot::slotted(nile-table-row:nth-child(odd)) {
-    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    border-bottom: 1px solid var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));
     background: var(--nile-table-background--odd);
   }
 

package/dist/src/nile-table-body/nile-table-body.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,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 * TableBody CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-table-background--odd: var(--nile-colors-base-white);\n    --nile-table-background--even: var(--nile-colors-base-white);\n  }\n\n  .base {\n    background-color: var(--nile-colors-white-base);\n    border: 1px solid var(--nile-table-row-border-color);\n    border-radius: var(--nile-radius-radius-xl);\n    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n    overflow: hidden;\n  }\n\n  .table__header {\n    display: flex;\n    box-sizing: border-box;\n  }\n\n  .nile__table__body {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  slot::slotted(nile-table-row:nth-child(odd)) {\n    border-bottom: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-table-background--odd);\n  }\n\n  slot::slotted(nile-table-row:nth-child(even)) {\n    background: var(--nile-table-background--even);\n  }\n\n  slot::slotted(nile-table-row:last-child) {\n    border-bottom: 0px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-body.css.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * TableBody CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-table-background--odd: var(--nile-colors-base-white , var(--ng-colors-bg-primary));\n    --nile-table-background--even: var(--nile-colors-base-white , var(--ng-colors-bg-primary));\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  .base {\n    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));\n    border: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-md , var(--ng-radius-xl));\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-3 , var(--ng-shadow-xs));\n  }\n\n  .table__header {\n    display: flex;\n    box-sizing: border-box;\n  }\n\n  .nile__table__body {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n  }\n\n  slot::slotted(nile-table-row:nth-child(odd)) {\n    border-bottom: 1px solid var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));\n    background: var(--nile-table-background--odd);\n  }\n\n  slot::slotted(nile-table-row:nth-child(even)) {\n    background: var(--nile-table-background--even);\n  }\n\n  slot::slotted(nile-table-row:last-child) {\n    border-bottom: 0px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js

@@ -18,19 +18,22 @@ export const styles = css `
     display: table-cell;
     vertical-align: middle;
     max-width: var(--max--cell-width);
-    padding: 16px 24px;
+    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));
     min-height: var(--min--height);
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
     height: 100%;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular , var(--ng-font-weight-regular));
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;

package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,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 * TableCellItem CSS\n */\nexport const styles = css`\n  :host {\n    --min-cell-width:auto;\n    --cell-width:auto;\n    --min--height: 52px;\n    --max--cell-width: auto;\n    box-sizing: border-box;\n    display: table-cell;\n    vertical-align: middle;\n    max-width: var(--max--cell-width);\n    padding: 16px 24px;\n    min-height: var(--min--height);\n  }\n\n  .column {\n    min-width:var(--min-cell-width);\n    width:var(--cell-width);\n    height: 100%;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    /* line-height: var(--nile-type-scale-6); */\n    line-height: normal;\n    letter-spacing: 0.2px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,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 * TableCellItem CSS\n */\nexport const styles = css`\n  :host {\n    --min-cell-width:auto;\n    --cell-width:auto;\n    --min--height: 52px;\n    --max--cell-width: auto;\n    box-sizing: border-box;\n    display: table-cell;\n    vertical-align: middle;\n    max-width: var(--max--cell-width);\n    padding: var(--nile-spacing-xl , var(--ng-spacing-lg)) var(--nile-spacing-3xl , var(--ng-spacing-3xl));\n    min-height: var(--min--height);\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  .column {\n    min-width:var(--min-cell-width);\n    width:var(--cell-width);\n    height: 100%;\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-tertiary-600));\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-regular));\n    /* line-height: var(--nile-type-scale-6); */\n    line-height: normal;\n    letter-spacing: 0.2px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-header-item/nile-table-header-item.css.js

@@ -14,15 +14,18 @@ export const styles = css `
     --cell-width: auto;
     display: table-cell;
     box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
-  
+
   .header__item__wrapper{
     min-width:var(--cell-min-width);
     width:var(--cell-width);
     display:flex;
     align-items:center;
     box-sizing: border-box;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
+    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));
     min-height: 44px;
     height: 44px;
   }
@@ -33,12 +36,12 @@ export const styles = css `
     align-items: center;
     height: auto;
     width: 100%;
-    gap: 8px;
-    color: var(--nile-colors-gray-light-mode-600);
-    font-family: var(--nile-font-family-serif);
+    gap: var(--nile-spacing-md , var(--ng-spacing-xs));
+    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));
+    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-size: var(--nile-type-scale-2);
-    font-weight: 500;
+    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
@@ -51,7 +54,7 @@ export const styles = css `
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    align-items: centre;
+    align-items: center;
   }
 
   .sorting__icons nile-icon:hover {

package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDxB,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 * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n  }\n  \n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: 8px;\n    color: var(--nile-colors-gray-light-mode-600);\n    font-family: var(--nile-font-family-serif);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2);\n    font-weight: 500;\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: centre;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0;\n  }\n\n  .headers:hover .hover__arrow {\n    opacity: 0.3;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 * TableHeaderItem CSS\n */\nexport const styles = css`\n  :host {\n    --cell-min-width: auto;\n    --cell-width: auto;\n    display: table-cell;\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .header__item__wrapper{\n    min-width:var(--cell-min-width);\n    width:var(--cell-width);\n    display:flex;\n    align-items:center;\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));\n    min-height: 44px;\n    height: 44px;\n  }\n\n  .headers {\n    overflow:hidden;\n    display: flex;\n    align-items: center;\n    height: auto;\n    width: 100%;\n    gap: var(--nile-spacing-md , var(--ng-spacing-xs));\n    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));\n    font-style: normal;\n    /* line-height: var(--nile-type-scale-5); */\n    line-height: normal;\n  }\n\n  nile-icon {\n    cursor: pointer;\n  }\n\n  .sorting__icons {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .sorting__icons nile-icon:hover {\n    opacity: 0.4;\n  }\n\n  .hover__arrow {\n    opacity: 0;\n  }\n\n  .headers:hover .hover__arrow {\n    opacity: 0.3;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-table-row/nile-table-row.css.js

@@ -14,17 +14,17 @@ export const styles = css `
     width: 100%;
     height: 100%;
     height: max-content;
-    --nile-header-background: var(--nile-table-header-background-color);
-    border-bottom: 1px solid var(--nile-table-row-border-color);
+    border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   slot::slotted(nile-table-header-item) {
-    background-color: var(--nile-header-background);
+    background-color: var(--nile-table-header-background-color , var(--ng-colors-bg-secondary));
   }
 
-  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
-    color: red;
-  }
+  
 `;
 export default [styles];
 //# sourceMappingURL=nile-table-row.css.js.map

package/dist/src/nile-table-row/nile-table-row.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxB,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 * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    width: 100%;\n    height: 100%;\n    height: max-content;\n    --nile-header-background: var(--nile-table-header-background-color);\n    border-bottom: 1px solid var(--nile-table-row-border-color);\n  }\n\n  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-header-background);\n  }\n\n  nile-table-row > slot::slotted(nile-table-cell-item:first-child) {\n    color: red;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxB,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 * TableRow CSS\n */\nexport const styles = css`\n  :host {\n    display: table-row;\n    width: 100%;\n    height: 100%;\n    height: max-content;\n    border-bottom: 1px solid var(--nile-table-row-border-color , var(--ng-colors-border-secondary));\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  slot::slotted(nile-table-header-item) {\n    background-color: var(--nile-table-header-background-color , var(--ng-colors-bg-secondary));\n  }\n\n  \n`;\n\nexport default [styles];\n"]}

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

@@ -11,6 +11,9 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .tag {
@@ -20,23 +23,30 @@ export const styles = css `
     line-height: 1;
     white-space: nowrap;
     user-select: none;
-    border-radius: 4px;
-    gap: 6px;
+    border-radius: var(--nile-radius-sm , var(--ng-radius-sm));
+    gap: var(--nile-spacing-sm , var(--ng-spacing-sm));
   }
 
   .tag__remove::part(base) {
     color: inherit;
-    padding: 0;
+    padding: var(--nile-spacing-none , var(--ng-spacing-none));
   }
 
   /*
    * Variant modifiers
    */
 
+  .tag--medium {
+    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-xsmall , var(--ng-spacing-md));
+  }
+
   .tag--primary {
     background: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    border: 2px solid  var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-primary));
+    border: 2px solid  var(--nile-colors-primary-600, var(--ng-colors-border-primary));
     color: var(--nile-colors-white-base);
   }
 
@@ -45,90 +55,82 @@ export const styles = css `
   }
 
   .tag--primary:active > nile-icon-button {
-    color: hsl(200.4 98% 39.4%);
+    color: var(--nile-colors-blue-700);
   }
 
   .tag--success {
     background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400);
+    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500);
+    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
   }
 
   .tag--success:active > nile-icon-button {
-    color: hsl(142.1 76.2% 36.3%);
+    color: var(--nile-colors-green-700);
   }
 
   .tag--normal {
-    background: var(--nile-colors-neutral-400);
-    border: 2px solid var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-neutral-400 , var(--ng-colors-bg-primary));
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
+    color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
   }
-
+  
   .tag--normal:hover {
-    border: 2px solid var(--nile-colors-neutral-500);
+    border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
   }
 
-
   .tag--normal:active > nile-icon-button {
-    color: hsl(240 5.2% 33.9%);
+    color: var(--nile-colors-neutral-700);
   }
 
   .tag--warning {
     background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400);
+    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500);
+    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
   }
 
   .tag--warning:active > nile-icon-button {
-    color: hsl(32.1 94.6% 43.7%);
+    color: var(--nile-colors-yellow-500);
   }
 
 
   .tag--error {
     background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400);
+    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500);
+    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
   }
 
   .tag--error:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
+    color: var(--nile-colors-red-500);
   }
 
   .tag--info {
     background: var(--nile-colors-blue-400);
-    border: 2px solid var(--nile-colors-blue-400);
+    border: 2px solid var(--nile-colors-blue-400, var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid var(--nile-colors-blue-500);
+    border: 2px solid var(--nile-colors-blue-500, var(--ng-colors-border-primary));
   }
 
   .tag--info:active > nile-icon-button {
-    color: hsl(0 72.2% 50.6%);
-  }
-
-
-  .tag--medium {
-    font-size: 14px;
-    height: 26px;
-    padding: 0 0.75rem;
+    color: var(--nile-colors-red-500);
   }
 
   .tag__remove {
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--nile-spacing-7px , var(--ng-spacing-md));
   }
 
   /*
@@ -136,17 +138,23 @@ export const styles = css `
    */
 
   .tag--pill {
-    border-radius: 9999px;
+    border-radius: var(--nile-radius-full , var(--ng-spacing-8xl));
   }
 
   .tag__prefix {
-  padding: 3px 6px;
+  padding: var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-sm , var(--ng-spacing-sm));
 }
 
  .tag__content {
-  font-size: 14px;
+  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
 }
 
+  .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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,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  }\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: 4px;\n    gap: 6px;\n  }\n\n  .tag__remove::part(base) {\n    color: inherit;\n    padding: 0;\n  }\n\n  /*\n   * Variant modifiers\n   */\n\n  .tag--primary {\n    background: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    border: 2px solid  var(--nile-colors-primary-600);\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: hsl(200.4 98% 39.4%);\n  }\n\n  .tag--success {\n    background: var(--nile-colors-green-400);\n    border: 2px solid var(--nile-colors-green-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--success:hover {\n    border: 2px solid var(--nile-colors-green-500);\n  }\n\n  .tag--success:active > nile-icon-button {\n    color: hsl(142.1 76.2% 36.3%);\n  }\n\n  .tag--normal {\n    background: var(--nile-colors-neutral-400);\n    border: 2px solid var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--normal:hover {\n    border: 2px solid var(--nile-colors-neutral-500);\n  }\n\n\n  .tag--normal:active > nile-icon-button {\n    color: hsl(240 5.2% 33.9%);\n  }\n\n  .tag--warning {\n    background: var(--nile-colors-yellow-400);\n    border: 2px solid var(--nile-colors-yellow-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--warning:hover {\n    border: 2px solid var(--nile-colors-yellow-500);\n  }\n\n  .tag--warning:active > nile-icon-button {\n    color: hsl(32.1 94.6% 43.7%);\n  }\n\n\n  .tag--error {\n    background: var(--nile-colors-red-400);\n    border: 2px solid var(--nile-colors-red-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--error:hover {\n    border: 2px solid var(--nile-colors-red-500);\n  }\n\n  .tag--error:active > nile-icon-button {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n  .tag--info {\n    background: var(--nile-colors-blue-400);\n    border: 2px solid var(--nile-colors-blue-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .tag--info:hover {\n    border: 2px solid var(--nile-colors-blue-500);\n  }\n\n  .tag--info:active > nile-icon-button {\n    color: hsl(0 72.2% 50.6%);\n  }\n\n\n  .tag--medium {\n    font-size: 14px;\n    height: 26px;\n    padding: 0 0.75rem;\n  }\n\n  .tag__remove {\n    margin-inline-start: 0.5rem;\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .tag--pill {\n    border-radius: 9999px;\n  }\n\n  .tag__prefix {\n  padding: 3px 6px;\n}\n\n .tag__content {\n  font-size: 14px;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJxB,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-xsmall , 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-3px, 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.d.ts

@@ -40,7 +40,7 @@ export declare class NileTag extends NileElement {
     /** Makes the tag removable and shows a remove button. */
     removable: boolean;
     private handleRemoveClick;
-    getCloseButtonColor(): "--nile-colors-blue-500" | "--nile-colors-green-500" | "--nile-colors-dark-500" | "--nile-colors-yellow-500" | "--nile-colors-red-500";
+    getCloseButtonColor(): string;
     render(): TemplateResult<1>;
 }
 export default NileTag;

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

@@ -48,22 +48,30 @@ let NileTag = class NileTag extends NileElement {
         this.emit('nile-remove');
     }
     getCloseButtonColor() {
+        let primaryColor;
         switch (this.variant) {
             case 'primary':
-                return '--nile-colors-blue-500';
+                primaryColor = '--nile-colors-blue-500';
+                break;
             case 'success':
-                return '--nile-colors-green-500';
+                primaryColor = '--nile-colors-green-500';
+                break;
             case 'normal':
-                return '--nile-colors-dark-500';
+                primaryColor = '--nile-colors-dark-500';
+                break;
             case 'warning':
-                return '--nile-colors-yellow-500';
+                primaryColor = '--nile-colors-yellow-500';
+                break;
             case 'error':
-                return '--nile-colors-red-500';
+                primaryColor = '--nile-colors-red-500';
+                break;
             case 'info':
-                return '--nile-colors-blue-500';
+                primaryColor = '--nile-colors-blue-500';
+                break;
             default:
-                return '--nile-colors-dark-500';
+                primaryColor = '--nile-colors-dark-500';
         }
+        return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;
     }
     render() {
         const colorVariable = this.getCloseButtonColor();
@@ -88,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 `
@@ -100,10 +109,10 @@ let NileTag = class NileTag extends NileElement {
                 name="close"
                 library="system"
                 label="remove"
-                class="tag__remove"
+                class="tag__remove cross_icon"
                 @click=${this.handleRemoveClick}
                 tabindex="-1"
-                color="var(${colorVariable})"
+                 color=${this.getCloseButtonColor()}
               ></nile-icon-button>
             `
             : ''}

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":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGL,+BAA+B;QACF,YAAO,GAMvB,QAAQ,CAAC;QAEtB,sBAAsB;QACO,SAAI,GAAiC,QAAQ,CAAC;QAE3E,iDAAiD;QACL,SAAI,GAAG,KAAK,CAAC;QAEzD,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;IA2EjD,CAAC;IAzES,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAQ,wBAAwB,CAAC;YACnC,KAAK,SAAS;gBACZ,OAAO,yBAAyB,CAAC;YACnC,KAAK,QAAQ;gBACX,OAAO,wBAAwB,CAAC;YAClC,KAAK,SAAS;gBACZ,OAAO,0BAA0B,CAAC;YACpC,KAAK,OAAO;gBACV,OAAO,uBAAuB,CAAC;YACjC,KAAK,MAAM;gBACT,OAAO,wBAAwB,CAAC;YAClC;gBACE,OAAO,wBAAwB,CAAC;QACpC,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACjD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,GAAG,EAAE,IAAI;YAET,QAAQ;YACR,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC1C,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACtC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAEpC,QAAQ;YACR,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAEnC,YAAY;YACZ,WAAW,EAAE,IAAI,CAAC,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,SAAS;SAEjC,CAAC;;;;;;UAMA,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;;;yBAQS,IAAI,CAAC,iBAAiB;;6BAElB,aAAa;;aAE7B;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA5FM,cAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAMN;AAGO;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAG5B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAnBpC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8FnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { 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    switch (this.variant) {\n      case 'primary':\n        return  '--nile-colors-blue-500'; \n      case 'success':\n        return '--nile-colors-green-500'; \n      case 'normal':\n        return '--nile-colors-dark-500'; \n      case 'warning':\n        return '--nile-colors-yellow-500';\n      case 'error':\n        return '--nile-colors-red-500';\n      case 'info':\n        return '--nile-colors-blue-500';\n      default:\n        return '--nile-colors-dark-500'; \n    }\n  }\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\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n                color=\"var(${colorVariable})\"\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"]}