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

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

@@ -0,0 +1,205 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Tag CSS
+ */
+export const styles = css `
+  :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .badge {
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md-alt));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: var(--nile-height-22px, var(--ng-height-24px));
+  }
+
+  .badge__content {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+  }
+
+  .badge--primary {
+    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));
+    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));
+  }
+
+  .badge--normal {
+    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));
+  }
+
+  .badge--info {
+    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));
+  }
+
+  /* for v2 */
+
+    .badge--pill-outline {
+    background: transparent ;
+  }
+  .badge--pink {
+    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));
+    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));
+  }
+
+  .badge--orange {
+    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
+    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
+  }
+
+  .badge--purple {
+    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));
+    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));
+  }
+
+  .badge--indigo {
+    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));
+    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));
+  }
+
+  .badge--blue {
+    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));
+    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));
+  }
+  .badge--blue-light {
+    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));
+    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));
+  }
+
+  .badge--gray-blue {
+    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-grayblue, var(--ng-componentcolors-utility-gray-blue-200));
+    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));
+  }
+
+  .badge--success {
+    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));
+    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));
+  }
+  .badge--warning {
+    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
+    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
+  }
+
+  .badge--error {
+    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));
+    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));
+  }
+
+  .badge--brand {
+    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));
+    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));
+  }
+
+  .badge--gray {
+    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
+    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
+    border-style: solid;
+    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
+    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
+  }
+
+  .badge--pink.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));
+  }
+
+  .badge--orange.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));
+  }
+
+  .badge--purple.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));
+  }
+
+  .badge--indigo.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));
+  }
+
+  .badge--blue.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));
+  }
+
+  .badge--blue-light.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));
+  }
+
+  .badge--gray-blue.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));
+  }
+
+  .badge--success.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));
+  }
+
+  .badge--warning.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));
+  }
+
+  .badge--error.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));
+  }
+
+  .badge--brand.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));
+  }
+
+  .badge--gray.badge--pill-outline {
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));
+  }
+
+
+
+  .badge--rounded {
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md-alt));
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-badge.css.js.map

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

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

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

@@ -0,0 +1,93 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { styles } from './nile-badge.css';
+import '../nile-icon-button/nile-icon-button';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-badge
+ *
+ */
+/**
+ * @summary badges are used as labels to organize things or to indicate a selection.
+ * @status stable
+ *
+ * @dependency nile-icon-button
+ *
+ * @slot - The badge's content.
+ *
+ * @event nile-remove - Emitted when the remove button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart content - The badge's content.
+ * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.
+ * @csspart remove-button__base - The remove button's exported `base` part.
+ */
+let NileBadge = class NileBadge extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The badge's theme variant. */
+        this.variant = 'normal';
+        /** Draws a pill-style badge with rounded edges. */
+        this.rounded = false;
+        //  For setting pill type
+        this.pilltype = 'badge-color';
+    }
+    render() {
+        return html `
+      <span
+        part="base"
+        class=${classMap({
+            badge: true,
+            'badge--primary': this.variant === 'primary',
+            'badge--normal': this.variant === 'normal',
+            'badge--info': this.variant === 'info',
+            'badge--pink': this.variant === 'pink',
+            'badge--orange': this.variant === 'orange',
+            'badge--purple': this.variant === 'purple',
+            'badge--indigo': this.variant === 'indigo',
+            'badge--blue': this.variant === 'blue',
+            'badge--blue-light': this.variant === 'blue-light',
+            'badge--gray-blue': this.variant === 'gray-blue',
+            'badge--success': this.variant === 'success',
+            'badge--warning': this.variant === 'warning',
+            'badge--error': this.variant === 'error',
+            'badge--brand': this.variant === 'brand',
+            'badge--gray': this.variant === 'gray',
+            'badge--pill-outline': this.pilltype == 'pill-outline',
+            'badge--badge-color': this.pilltype == 'badge-color',
+            'badge--rounded': this.rounded ||
+                this.pilltype == 'pill-outline' ||
+                this.pilltype == 'pill-color',
+        })}
+      >
+        <slot part="content" class="badge__content"></slot>
+      </span>
+    `;
+    }
+};
+NileBadge.styles = styles;
+__decorate([
+    property({ reflect: true })
+], NileBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileBadge.prototype, "rounded", void 0);
+__decorate([
+    property({ reflect: true })
+], NileBadge.prototype, "pilltype", void 0);
+NileBadge = __decorate([
+    customElement('nile-badge')
+], NileBadge);
+export { NileBadge };
+export default NileBadge;
+//# sourceMappingURL=nile-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-badge.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,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,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAGL,iCAAiC;QACJ,YAAO,GAgBlB,QAAQ,CAAC;QAE3B,mDAAmD;QACP,YAAO,GAAG,KAAK,CAAC;QAE5D,yBAAyB;QACI,aAAQ,GAGnB,aAAa,CAAC;IAmClC,CAAC;IAjCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YACX,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YAClD,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAChD,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,qBAAqB,EAAE,IAAI,CAAC,QAAQ,IAAI,cAAc;YACtD,oBAAoB,EAAE,IAAI,CAAC,QAAQ,IAAI,aAAa;YACpD,gBAAgB,EACd,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,QAAQ,IAAI,cAAc;gBAC/B,IAAI,CAAC,QAAQ,IAAI,YAAY;SAChC,CAAC;;;;KAIL,CAAC;IACJ,CAAC;;AA9DM,gBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAgBD;AAGiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAG/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAGI;AA7BrB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAgErB;;AAED,eAAe,SAAS,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-badge.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-badge\n *\n */\n\n/**\n * @summary badges 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 badge'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 badge's content.\n * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-badge')\nexport class NileBadge extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The badge's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info'\n    | 'gray'\n    | 'brand'\n    | 'blue-light'\n    | 'blue'\n    | 'indigo'\n    | 'purple'\n    | 'pink'\n    | 'orange'\n    | 'blue-gray'\n    | 'gray-blue' = 'normal';\n\n  /** Draws a pill-style badge with rounded edges. */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  //  For setting pill type\n  @property({ reflect: true }) pilltype:\n    | 'pill-color'\n    | 'pill-outline'\n    | 'badge-color'='badge-color';\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          badge: true,\n          'badge--primary': this.variant === 'primary',\n          'badge--normal': this.variant === 'normal',\n          'badge--info': this.variant === 'info',\n          'badge--pink': this.variant === 'pink',\n          'badge--orange': this.variant === 'orange',\n          'badge--purple': this.variant === 'purple',\n          'badge--indigo': this.variant === 'indigo',\n          'badge--blue': this.variant === 'blue',\n          'badge--blue-light': this.variant === 'blue-light',\n          'badge--gray-blue': this.variant === 'gray-blue',\n          'badge--success': this.variant === 'success',\n          'badge--warning': this.variant === 'warning',\n          'badge--error': this.variant === 'error',\n          'badge--brand': this.variant === 'brand',\n          'badge--gray': this.variant === 'gray',\n          'badge--pill-outline': this.pilltype == 'pill-outline',\n          'badge--badge-color': this.pilltype == 'badge-color',\n          'badge--rounded':\n            this.rounded ||\n            this.pilltype == 'pill-outline' ||\n            this.pilltype == 'pill-color',\n        })}\n      >\n        <slot part=\"content\" class=\"badge__content\"></slot>\n      </span>\n    `;\n  }\n}\n\nexport default NileBadge;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-badge': NileBadge;\n  }\n}\n"]}

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

@@ -0,0 +1,42 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import './nile-badge';
+describe('NileBadge', () => {
+    it('should display the default slot content', async () => {
+        const el = await fixture(html `<nile-badge>Badge Content</nile-badge>`);
+        expect(el).shadowDom.to.equalSnapshot();
+        expect(el.textContent).to.equal('Badge Content');
+    });
+    it('should apply the correct variant class based on the variant property', async () => {
+        const el = await fixture(html `<nile-badge variant="success">Success Badge</nile-badge>`);
+        const badge = el.shadowRoot.querySelector('span');
+        expect(badge).to.have.class('badge--success');
+    });
+    it('should apply the rounded class when rounded is true', async () => {
+        const el = await fixture(html `<nile-badge rounded>Rounded Badge</nile-badge>`);
+        const badge = el.shadowRoot.querySelector('span');
+        expect(badge).to.have.class('badge--rounded');
+    });
+    it('should apply the pill-outline class when pilltype is pill-outline', async () => {
+        const el = await fixture(html `<nile-badge pilltype="pill-outline">Pill Outline Badge</nile-badge>`);
+        const badge = el.shadowRoot.querySelector('span');
+        expect(badge).to.have.class('badge--pill-outline');
+    });
+    it('should apply the badge-color class when pilltype is badge-color', async () => {
+        const el = await fixture(html `<nile-badge pilltype="badge-color">Badge Color Badge</nile-badge>`);
+        const badge = el.shadowRoot.querySelector('span');
+        expect(badge).to.have.class('badge--badge-color');
+    });
+    it('should apply the correct classes when multiple properties are set', async () => {
+        const el = await fixture(html `<nile-badge variant="warning" rounded pilltype="pill-color">Warning Badge</nile-badge>`);
+        const badge = el.shadowRoot.querySelector('span');
+        expect(badge).to.have.class('badge--warning');
+        expect(badge).to.have.class('badge--rounded');
+    });
+    it('should reflect properties to attributes', async () => {
+        const el = await fixture(html `<nile-badge variant="error" rounded pilltype="pill-outline"></nile-badge>`);
+        expect(el.getAttribute('variant')).to.equal('error');
+        expect(el.hasAttribute('rounded')).to.be.true;
+        expect(el.getAttribute('pilltype')).to.equal('pill-outline');
+    });
+});
+//# sourceMappingURL=nile-badge.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-badge.test.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport './nile-badge';\n\ndescribe('NileBadge', () => {\n  it('should display the default slot content', async () => {\n    const el = await fixture(html`<nile-badge>Badge Content</nile-badge>`);\n    expect(el).shadowDom.to.equalSnapshot();\n    expect(el.textContent).to.equal('Badge Content');\n  });\n\n  it('should apply the correct variant class based on the variant property', async () => {\n    const el = await fixture(html`<nile-badge variant=\"success\">Success Badge</nile-badge>`);\n    const badge = el.shadowRoot!.querySelector('span');\n    expect(badge).to.have.class('badge--success');\n  });\n\n  it('should apply the rounded class when rounded is true', async () => {\n    const el = await fixture(html`<nile-badge rounded>Rounded Badge</nile-badge>`);\n    const badge = el.shadowRoot!.querySelector('span');\n    expect(badge).to.have.class('badge--rounded');\n  });\n\n  it('should apply the pill-outline class when pilltype is pill-outline', async () => {\n    const el = await fixture(html`<nile-badge pilltype=\"pill-outline\">Pill Outline Badge</nile-badge>`);\n    const badge = el.shadowRoot!.querySelector('span');\n    expect(badge).to.have.class('badge--pill-outline');\n  });\n\n  it('should apply the badge-color class when pilltype is badge-color', async () => {\n    const el = await fixture(html`<nile-badge pilltype=\"badge-color\">Badge Color Badge</nile-badge>`);\n    const badge = el.shadowRoot!.querySelector('span');\n    expect(badge).to.have.class('badge--badge-color');\n  });\n\n  it('should apply the correct classes when multiple properties are set', async () => {\n    const el = await fixture(html`<nile-badge variant=\"warning\" rounded pilltype=\"pill-color\">Warning Badge</nile-badge>`);\n    const badge = el.shadowRoot!.querySelector('span');\n    expect(badge).to.have.class('badge--warning');\n    expect(badge).to.have.class('badge--rounded');\n  });\n\n  it('should reflect properties to attributes', async () => {\n    const el = await fixture(html`<nile-badge variant=\"error\" rounded pilltype=\"pill-outline\"></nile-badge>`);\n    expect(el.getAttribute('variant')).to.equal('error');\n    expect(el.hasAttribute('rounded')).to.be.true;\n    expect(el.getAttribute('pilltype')).to.equal('pill-outline');\n  });\n});"]}

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

@@ -0,0 +1,2 @@
+export { NileBreadcrumb } from './nile-breadcrumb';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC","sourcesContent":["export {NileBreadcrumb} from './nile-breadcrumb';"]}

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

@@ -0,0 +1,21 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Breadcrumb CSS
+ */
+export const styles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-breadcrumb.css.js.map

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

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

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-breadcrumb.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile BreadCrumb component.
+ *
+ * @tag nile-breadcrumb
+ *
+ */
+let NileBreadcrumb = class NileBreadcrumb extends NileElement {
+    /**
+     * The styles for Breadcrumb
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            this.changeLastItem();
+        });
+    }
+    changeLastItem() {
+        const items = [...this.querySelectorAll('nile-breadcrumb-item')];
+        const itemslength = items.length;
+        for (let i = 0; i < itemslength - 1; i++) {
+            const element = items[i];
+            element.isLast = false;
+        }
+        const lastItem = items[itemslength - 1];
+        lastItem.isLast = true;
+    }
+    handleRemoveClick(event) {
+        this.emit('nile-click', { value: event.target.innerText });
+    }
+    render() {
+        return html `
+      <slot
+        @slotchange=${this.changeLastItem}
+        @nile-click-item=${this.handleRemoveClick}
+        class="breadcrumb"
+      ></slot>
+    `;
+    }
+};
+NileBreadcrumb = __decorate([
+    customElement('nile-breadcrumb')
+], NileBreadcrumb);
+export { NileBreadcrumb };
+export default NileBreadcrumb;
+//# sourceMappingURL=nile-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-breadcrumb.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/nile-breadcrumb.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAC7C;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACH,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,MAAM,KAAK,GAAQ,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC;QACtE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACzB,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;QACzB,CAAC;QACD,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QACxC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;IACzB,CAAC;IAEO,iBAAiB,CAAC,KAAU;QAClC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC;IAC7D,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;sBAEO,IAAI,CAAC,cAAc;2BACd,IAAI,CAAC,iBAAiB;;;KAG5C,CAAC;IACJ,CAAC;CAGF,CAAA;AAlDY,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAkD1B;;AAED,eAAe,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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-breadcrumb.css';\nimport NileElement from '../internal/nile-element';\nimport { foreach } from '../nile-icon/icons/svg';\n/**\n * Nile BreadCrumb component.\n *\n * @tag nile-breadcrumb\n *\n */\n@customElement('nile-breadcrumb')\nexport class NileBreadcrumb extends NileElement {\n  /**\n   * The styles for Breadcrumb\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      this.changeLastItem();\n    });\n  }\n\n  private changeLastItem() {\n    const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];\n    const itemslength = items.length;\n    for (let i = 0; i < itemslength - 1; i++) {\n      const element = items[i];\n      element.isLast = false;\n    }\n    const lastItem = items[itemslength - 1];\n    lastItem.isLast = true;\n  }\n\n  private handleRemoveClick(event: any) {\n    this.emit('nile-click', { value: event.target.innerText });\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot\n        @slotchange=${this.changeLastItem}\n        @nile-click-item=${this.handleRemoveClick}\n        class=\"breadcrumb\"\n      ></slot>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileBreadcrumb;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-breadcrumb': NileBreadcrumb;\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+export { NileBreadcrumbItem } from './nile-breadcrumb-item';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,wBAAwB,CAAC","sourcesContent":["export {NileBreadcrumbItem} from './nile-breadcrumb-item';"]}

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

@@ -0,0 +1,49 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Breadcrumb-item CSS
+ */
+export const styles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px; 
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .nile-breadcrumb-item__arrow {
+    margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .nile-breadcrumb-item__arrow-hidden {
+    display: none;
+  }
+
+  .nile-breadcrumb-item__slot-text {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
+  }
+
+  .nile-breadcrumb-item__slot-text:hover {
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));
+    cursor: pointer;
+  }
+
+  .nile-breadcrumb-item__last-slot-text {
+    color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-breadcrumb-item.css.js.map

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

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

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

@@ -0,0 +1,79 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-breadcrumb-item.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile BreadCrumb Item component.
+ *
+ * @tag nile-breadcrumb-item
+ *
+ */
+let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.isLast = false;
+        /* #endregion */
+        /* #region Methods */
+        /**
+         * Render method
+         * @slot This is a slot test
+         */
+        this.separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';
+        /* #endregion */
+    }
+    /**
+     * The styles for BreadcrumbItem
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    handleClick() {
+        if (this.isLast) {
+            return;
+        }
+        this.emit('nile-click-item');
+    }
+    render() {
+        return html `
+      <slot
+        class=${classMap({
+            'nile-breadcrumb-item__slot-text': !this.isLast,
+            'nile-breadcrumb-item__last-slot-text': this.isLast,
+        })}
+        @click=${this.handleClick}
+      ></slot>
+      <nile-icon
+        name=${this.separator}
+        aria-label=${this.separator}
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+        color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"
+        class=${classMap({
+            'nile-breadcrumb-item__arrow': true,
+            'nile-breadcrumb-item__arrow-hidden': this.isLast,
+        })}
+        size="14"
+      ></nile-icon>
+    `;
+    }
+};
+__decorate([
+    state()
+], NileBreadcrumbItem.prototype, "isLast", void 0);
+__decorate([
+    property({ type: String })
+], NileBreadcrumbItem.prototype, "separator", void 0);
+NileBreadcrumbItem = __decorate([
+    customElement('nile-breadcrumb-item')
+], NileBreadcrumbItem);
+export { NileBreadcrumbItem };
+export default NileBreadcrumbItem;
+//# sourceMappingURL=nile-breadcrumb-item.js.map