@aquera/nile-elements 0.0.80 → 0.0.82

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

@@ -32,134 +32,134 @@ export const styles = css `
   }
 
   .badge--primary {
-    background: #005ea6;
+    background: var(--nile-badge-color-background-primary);
   }
 
   .badge--normal {
-    background: #e5e9eb;
+    background: var(--nile-badge-color-background-normal);
   }
 
   .badge--info {
-    background: #a5d3f3;
+    background: var(--nile-badge-color-background-info);
   }
 
   /* for v2 */
   .badge--pink {
-    color: #c11574;
-    border: var(--nile-badge-color-border-width) solid #fcceee;
-    background: #fdf2fa;
+    color: var(--nile-badge-color-font-pink);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);
+    background: var(--nile-badge-color-background-pink);
   }
 
   .badge--orange {
-    color: #b93815;
-    border: var(--nile-badge-color-border-width) solid #f9dbaf;
-    background: #fef6ee;
+    color: var(--nile-badge-color-font-orange);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);
+    background: var(--nile-badge-color-background-orange);
   }
 
   .badge--purple {
-    color: #5925dc;
-    border: var(--nile-badge-color-border-width) solid #d9d6fe;
-    background: #f4f3ff;
+    color: var(--nile-badge-color-font-purple);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);
+    background: var(--nile-badge-color-background-purple);
   }
 
   .badge--indigo {
-    color: #3538cd;
-    border: var(--nile-badge-color-border-width) solid #c7d7fe;
-    background: #eef4ff;
+    color: var(--nile-badge-color-font-indigo);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);
+    background: var(--nile-badge-color-background-indigo);
   }
 
   .badge--blue {
-    color: #175cd3;
-    border: var(--nile-badge-color-border-width) solid #b2ddff;
-    background: #eff8ff;
+    color: var(--nile-badge-color-font-blue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);
+    background: var(--nile-badge-color-background-blue);
   }
   .badge--blue-light {
-    color: #026aa2;
-    border: var(--nile-badge-color-border-width) solid #b9e6fe;
-    background: #f0f9ff;
+    color:var(--nile-badge-color-font-bluelight);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);
+    background: var(--nile-badge-color-background-bluelight);
   }
 
   .badge--gray-blue {
-    color: #363f72;
-    border: var(--nile-badge-color-border-width) solid #d5d9eb;
-    background: #f8f9fc;
+    color: var(--nile-badge-color-font-grayblue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);
+    background: var(--nile-badge-color-background-grayblue);
   }
 
   .badge--success {
     color: var(--nile-badge-color-font-success);
-    border: var(--nile-badge-color-border-width) solid #abefc6;
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);
     background: var(--nile-badge-color-background-success);
   }
   .badge--warning {
     color: var(--nile-badge-color-font-warning);
-    border: var(--nile-badge-color-border-width) solid #fedf89;
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);
     background: var(--nile-badge-color-background-warning);
   }
 
   .badge--error {
     color: var(--nile-badge-color-font-error);
-    border: var(--nile-badge-color-border-width) solid #fecdca;
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);
     background: var(--nile-badge-color-background-error);
   }
 
   .badge--brand {
-    color: #005291;
-    border: var(--nile-badge-color-border-width) solid #b5c9e0;
-    background: #eaf0f8;
+    color: var(--nile-badge-color-font-brand);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);
+    background: var(--nile-badge-color-background-brand);
   }
 
   .badge--gray {
-    color: #344054;
-    border: var(--nile-badge-color-border-width) solid #eaecf0;
-    background: #f9fafb;
+    color: var(--nile-badge-color-font-gray);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);
+    background: var(--nile-badge-color-background-gray);
   }
 
   .badge--pink.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #dd2590;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);
   }
 
   .badge--orange.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #e04f16;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);
   }
 
   .badge--purple.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #6938ef;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);
   }
 
   .badge--indigo.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #444ce7;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));
   }
 
   .badge--blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #1570ef;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));
   }
 
   .badge--blue-light.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #0086c9;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);
   }
 
   .badge--gray-blue.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #3e4784;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
   }
 
   .badge--success.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #079455;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);
   }
 
   .badge--warning.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #dc6803;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);
   }
 
   .badge--error.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #d92d20;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);
   }
 
   .badge--brand.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #005ea6;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);
   }
 
   .badge--gray.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline) solid #475467;
+    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);
   }
 
   .badge--pill-outline {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKxB,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-element';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 22px;\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n    letter-spacing: 0.2px;\n  }\n\n  .badge--primary {\n    background: #005ea6;\n  }\n\n  .badge--normal {\n    background: #e5e9eb;\n  }\n\n  .badge--info {\n    background: #a5d3f3;\n  }\n\n  /* for v2 */\n  .badge--pink {\n    color: #c11574;\n    border: var(--nile-badge-color-border-width) solid #fcceee;\n    background: #fdf2fa;\n  }\n\n  .badge--orange {\n    color: #b93815;\n    border: var(--nile-badge-color-border-width) solid #f9dbaf;\n    background: #fef6ee;\n  }\n\n  .badge--purple {\n    color: #5925dc;\n    border: var(--nile-badge-color-border-width) solid #d9d6fe;\n    background: #f4f3ff;\n  }\n\n  .badge--indigo {\n    color: #3538cd;\n    border: var(--nile-badge-color-border-width) solid #c7d7fe;\n    background: #eef4ff;\n  }\n\n  .badge--blue {\n    color: #175cd3;\n    border: var(--nile-badge-color-border-width) solid #b2ddff;\n    background: #eff8ff;\n  }\n  .badge--blue-light {\n    color: #026aa2;\n    border: var(--nile-badge-color-border-width) solid #b9e6fe;\n    background: #f0f9ff;\n  }\n\n  .badge--gray-blue {\n    color: #363f72;\n    border: var(--nile-badge-color-border-width) solid #d5d9eb;\n    background: #f8f9fc;\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success);\n    border: var(--nile-badge-color-border-width) solid #abefc6;\n    background: var(--nile-badge-color-background-success);\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning);\n    border: var(--nile-badge-color-border-width) solid #fedf89;\n    background: var(--nile-badge-color-background-warning);\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error);\n    border: var(--nile-badge-color-border-width) solid #fecdca;\n    background: var(--nile-badge-color-background-error);\n  }\n\n  .badge--brand {\n    color: #005291;\n    border: var(--nile-badge-color-border-width) solid #b5c9e0;\n    background: #eaf0f8;\n  }\n\n  .badge--gray {\n    color: #344054;\n    border: var(--nile-badge-color-border-width) solid #eaecf0;\n    background: #f9fafb;\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #dd2590;\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #e04f16;\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #6938ef;\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #444ce7;\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #1570ef;\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #0086c9;\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #3e4784;\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #079455;\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #dc6803;\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #d92d20;\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #005ea6;\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid #475467;\n  }\n\n  .badge--pill-outline {\n    background: transparent;\n  }\n\n  .badge--rounded {\n    padding: 2px 8px;\n    border-radius: 100px;\n  }\n`;\nexport default [styles];\n"]}
+{"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKxB,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-element';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .badge {\n    padding: 2px 6px;\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 22px;\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n    letter-spacing: 0.2px;\n  }\n\n  .badge--primary {\n    background: var(--nile-badge-color-background-primary);\n  }\n\n  .badge--normal {\n    background: var(--nile-badge-color-background-normal);\n  }\n\n  .badge--info {\n    background: var(--nile-badge-color-background-info);\n  }\n\n  /* for v2 */\n  .badge--pink {\n    color: var(--nile-badge-color-font-pink);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);\n    background: var(--nile-badge-color-background-pink);\n  }\n\n  .badge--orange {\n    color: var(--nile-badge-color-font-orange);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);\n    background: var(--nile-badge-color-background-orange);\n  }\n\n  .badge--purple {\n    color: var(--nile-badge-color-font-purple);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);\n    background: var(--nile-badge-color-background-purple);\n  }\n\n  .badge--indigo {\n    color: var(--nile-badge-color-font-indigo);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);\n    background: var(--nile-badge-color-background-indigo);\n  }\n\n  .badge--blue {\n    color: var(--nile-badge-color-font-blue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);\n    background: var(--nile-badge-color-background-blue);\n  }\n  .badge--blue-light {\n    color:var(--nile-badge-color-font-bluelight);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);\n    background: var(--nile-badge-color-background-bluelight);\n  }\n\n  .badge--gray-blue {\n    color: var(--nile-badge-color-font-grayblue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);\n    background: var(--nile-badge-color-background-grayblue);\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);\n    background: var(--nile-badge-color-background-success);\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);\n    background: var(--nile-badge-color-background-warning);\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);\n    background: var(--nile-badge-color-background-error);\n  }\n\n  .badge--brand {\n    color: var(--nile-badge-color-font-brand);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);\n    background: var(--nile-badge-color-background-brand);\n  }\n\n  .badge--gray {\n    color: var(--nile-badge-color-font-gray);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);\n    background: var(--nile-badge-color-background-gray);\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--pill-outline {\n    background: transparent;\n  }\n\n  .badge--rounded {\n    padding: 2px 8px;\n    border-radius: 100px;\n  }\n`;\nexport default [styles];\n"]}

package/dist/src/nile-badge/nile-badge.test.d.ts

@@ -0,0 +1 @@
+import './nile-badge';

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":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,cAAc,CAAC;AAEtB,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,wCAAwC,CAAC,CAAC;QACvE,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC;QACxC,MAAM,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,0DAA0D,CAAC,CAAC;QACzF,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAC/E,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;QACjF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,qEAAqE,CAAC,CAAC;QACpG,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,mEAAmE,CAAC,CAAC;QAClG,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;QACjF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,wFAAwF,CAAC,CAAC;QACvH,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QAC9C,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,2EAA2E,CAAC,CAAC;QAC1G,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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-item/nile-breadcrumb-item.css.js

@@ -13,12 +13,11 @@ export const styles = css `
     display: flex;
     align-items: center;
     text-align: center;
-    font-feature-settings: 'clig' off, 'liga' off;
-    font-family: var(--nile-font-family-serif); 
+    font-family: var(--nile-font-family-serif);
     font-size: var(--nile-font-size-small);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height:16.8px;
+    line-height: 16.8px;
     letter-spacing: 0.2px;
   }
 
@@ -40,7 +39,7 @@ export const styles = css `
   }
 
   .nile-breadcrumb-item__last-slot-text {
-    color: #026e78;
+    color: var(--nile-breadcrumb-color);
   }
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,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-element';\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-feature-settings: 'clig' off, 'liga' off;\n    font-family: var(--nile-font-family-serif); \n    font-size: var(--nile-font-size-small);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height:16.8px;\n    letter-spacing: 0.2px;\n  }\n\n  .nile-breadcrumb-item__arrow {\n    margin: 0 8px;\n  }\n\n  .nile-breadcrumb-item__arrow-hidden {\n    display: none;\n  }\n\n  .nile-breadcrumb-item__slot-text {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: #026e78;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Breadcrumb-item CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n    text-align: center;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-font-size-small);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: 16.8px;\n    letter-spacing: 0.2px;\n  }\n\n  .nile-breadcrumb-item__arrow {\n    margin: 0 8px;\n  }\n\n  .nile-breadcrumb-item__arrow-hidden {\n    display: none;\n  }\n\n  .nile-breadcrumb-item__slot-text {\n    color: var(--nile-colors-dark-500);\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: var(--nile-breadcrumb-color);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-button/nile-button.test.d.ts

@@ -0,0 +1 @@
+import './nile-button';

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

@@ -0,0 +1,86 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-button'; // Adjust the import path as necessary
+describe('NileButton', () => {
+    it('should render with default properties', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el).to.exist;
+        expect(el.variant).to.equal('primary');
+        expect(el.size).to.equal('medium');
+        expect(el.type).to.equal('button');
+        expect(el.disabled).to.be.false;
+        expect(el.loading).to.be.false;
+    });
+    it('should apply the correct classes based on properties', async () => {
+        const el = await fixture(html `<nile-button variant="secondary" pill outline caret></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--secondary')).to.be.true;
+        expect(button.classList.contains('button--pill')).to.be.true;
+        expect(button.classList.contains('button--outline')).to.be.true;
+        expect(button.classList.contains('button--caret')).to.be.true;
+    });
+    it('should be disabled when the disabled property is set', async () => {
+        const el = await fixture(html `<nile-button disabled></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.hasAttribute('disabled')).to.be.true;
+        expect(button.getAttribute('aria-disabled')).to.equal('true');
+    });
+    it('should render a link when the href property is set', async () => {
+        const el = await fixture(html `<nile-button
+        href="https://example.com"
+        target="_blank"
+      ></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.tagName).to.equal('A');
+        expect(button.getAttribute('href')).to.equal('https://example.com');
+        expect(button.getAttribute('target')).to.equal('_blank');
+    });
+    it('should show a spinner when the loading property is set', async () => {
+        const el = await fixture(html `<nile-button loading></nile-button>`);
+        const spinner = el.shadowRoot.querySelector('nile-spinner');
+        expect(spinner).to.exist;
+    });
+    it('should emit nile-focus and nile-blur events', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        let focusEventEmitted = false;
+        el.addEventListener('nile-focus', () => (focusEventEmitted = true));
+        button.dispatchEvent(new FocusEvent('focus'));
+        expect(focusEventEmitted).to.be.true;
+        let blurEventEmitted = false;
+        el.addEventListener('nile-blur', () => (blurEventEmitted = true));
+        button.dispatchEvent(new FocusEvent('blur'));
+        expect(blurEventEmitted).to.be.true;
+    });
+    it('should simulate a click on the button', async () => {
+        const el = await fixture(html `<nile-button>Click Me</nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        let clicked = false;
+        el.addEventListener('click', () => (clicked = true));
+        el.click();
+        expect(clicked).to.be.true;
+    });
+    it('should focus and blur the button programmatically', async () => {
+        const el = await fixture(html `<nile-button>Click Me</nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        el.focus();
+        await el.updateComplete;
+        const focusButton = el.shadowRoot.querySelector('.button--focused');
+        expect(focusButton.classList.contains('button--focused')).to.be.true;
+        el.blur();
+        await el.updateComplete;
+        const blurButton = el.shadowRoot.querySelector('.button');
+        expect(blurButton.classList.contains('button--focused')).to.be.false;
+    });
+    it('should set a custom validation message', async () => {
+        const el = await fixture(html `<nile-button type="submit"></nile-button>`);
+        const form = document.createElement('form');
+        form.appendChild(el);
+        document.body.appendChild(form);
+        el.setCustomValidity('Invalid input');
+        expect(el.validationMessage).to.equal('Invalid input');
+        el.setCustomValidity('');
+        expect(el.validationMessage).to.equal('');
+        document.body.removeChild(form);
+    });
+});
+//# sourceMappingURL=nile-button.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button.test.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing';\nimport './nile-button'; // Adjust the import path as necessary\nimport NileButton from './nile-button';\nimport sinon from 'sinon';\n\ndescribe('NileButton', () => {\n  it('should render with default properties', async () => {\n    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);\n    expect(el).to.exist;\n    expect(el.variant).to.equal('primary');\n    expect(el.size).to.equal('medium');\n    expect(el.type).to.equal('button');\n    expect(el.disabled).to.be.false;\n    expect(el.loading).to.be.false;\n  });\n\n  it('should apply the correct classes based on properties', async () => {\n    const el = await fixture<NileButton>(\n      html`<nile-button variant=\"secondary\" pill outline caret></nile-button>`\n    );\n    const button = el.shadowRoot!.querySelector('.button');\n    expect(button!.classList.contains('button--secondary')).to.be.true;\n    expect(button!.classList.contains('button--pill')).to.be.true;\n    expect(button!.classList.contains('button--outline')).to.be.true;\n    expect(button!.classList.contains('button--caret')).to.be.true;\n  });\n\n  it('should be disabled when the disabled property is set', async () => {\n    const el = await fixture<NileButton>(\n      html`<nile-button disabled></nile-button>`\n    );\n    const button = el.shadowRoot!.querySelector('.button');\n    expect(button!.hasAttribute('disabled')).to.be.true;\n    expect(button!.getAttribute('aria-disabled')).to.equal('true');\n  });\n\n  it('should render a link when the href property is set', async () => {\n    const el = await fixture<NileButton>(\n      html`<nile-button\n        href=\"https://example.com\"\n        target=\"_blank\"\n      ></nile-button>`\n    );\n    const button = el.shadowRoot!.querySelector('.button');\n    expect(button!.tagName).to.equal('A');\n    expect(button!.getAttribute('href')).to.equal('https://example.com');\n    expect(button!.getAttribute('target')).to.equal('_blank');\n  });\n\n  it('should show a spinner when the loading property is set', async () => {\n    const el = await fixture<NileButton>(\n      html`<nile-button loading></nile-button>`\n    );\n    const spinner = el.shadowRoot!.querySelector('nile-spinner');\n    expect(spinner).to.exist;\n  });\n\n  it('should emit nile-focus and nile-blur events', async () => {\n    const el = await fixture<NileButton>(html`<nile-button></nile-button>`);\n    const button = el.shadowRoot!.querySelector('.button');\n\n    let focusEventEmitted = false;\n    el.addEventListener('nile-focus', () => (focusEventEmitted = true));\n    button!.dispatchEvent(new FocusEvent('focus'));\n    expect(focusEventEmitted).to.be.true;\n\n    let blurEventEmitted = false;\n    el.addEventListener('nile-blur', () => (blurEventEmitted = true));\n    button!.dispatchEvent(new FocusEvent('blur'));\n    expect(blurEventEmitted).to.be.true;\n  });\n\n  it('should simulate a click on the button', async () => {\n    const el = await fixture<NileButton>(\n      html`<nile-button>Click Me</nile-button>`\n    );\n    const button = el.shadowRoot!.querySelector('.button');\n\n    let clicked = false;\n    el.addEventListener('click', () => (clicked = true));\n    el.click();\n    expect(clicked).to.be.true;\n  });\n\n  it('should focus and blur the button programmatically', async () => {\n    const el = await fixture<NileButton>(\n      html`<nile-button>Click Me</nile-button>`\n    );\n    const button = el.shadowRoot!.querySelector('.button');\n    el.focus();\n    await el.updateComplete;\n    const focusButton = el.shadowRoot!.querySelector('.button--focused');\n    expect(focusButton!.classList.contains('button--focused')).to.be.true;\n\n    el.blur();\n    await el.updateComplete;\n    const blurButton = el.shadowRoot!.querySelector('.button');\n    expect(blurButton!.classList.contains('button--focused')).to.be.false;\n  });\n\n  it('should set a custom validation message', async () => {\n    const el = await fixture<NileButton>(\n      html`<nile-button type=\"submit\"></nile-button>`\n    );\n    const form = document.createElement('form');\n    form.appendChild(el);\n    document.body.appendChild(form);\n\n    el.setCustomValidity('Invalid input');\n    expect(el.validationMessage).to.equal('Invalid input');\n\n    el.setCustomValidity('');\n    expect(el.validationMessage).to.equal('');\n\n    document.body.removeChild(form);\n  });\n});\n"]}

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.test.d.ts

@@ -0,0 +1,2 @@
+import '../nile-button-toggle';
+import './nile-button-toggle-group';

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.test.js

@@ -0,0 +1,108 @@
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
+import '../nile-button-toggle';
+import './nile-button-toggle-group';
+describe('NileButtonToggleGroup', () => {
+    it('should render all button toggles', async () => {
+        const el = await fixture(html `
+      <nile-button-toggle-group>
+        <nile-button-toggle value="option1">Toggle 1</nile-button-toggle>
+        <nile-button-toggle value="option2">Toggle 2</nile-button-toggle>
+        <nile-button-toggle value="option3">Toggle 3</nile-button-toggle>
+      </nile-button-toggle-group>
+    `);
+        const toggles = el.querySelectorAll('nile-button-toggle');
+        expect(toggles.length).to.equal(3);
+    });
+    it('should set the correct positions for the toggles', async () => {
+        const el = await fixture(html `
+      <nile-button-toggle-group>
+        <nile-button-toggle value="option1">Toggle 1</nile-button-toggle>
+        <nile-button-toggle value="option2">Toggle 2</nile-button-toggle>
+        <nile-button-toggle value="option3">Toggle 3</nile-button-toggle>
+      </nile-button-toggle-group>
+    `);
+        const toggles = el.querySelectorAll('nile-button-toggle');
+        expect(toggles[0].initial).to.be.true;
+        expect(toggles[0].middle).to.be.false;
+        expect(toggles[0].end).to.be.false;
+        expect(toggles[1].initial).to.be.false;
+        expect(toggles[1].middle).to.be.true;
+        expect(toggles[1].end).to.be.false;
+        expect(toggles[2].initial).to.be.false;
+        expect(toggles[2].middle).to.be.false;
+        expect(toggles[2].end).to.be.true;
+    });
+    it('should toggle the active state correctly', async () => {
+        const el = await fixture(html `
+      <nile-button-toggle-group>
+        <nile-button-toggle value="option1">Toggle 1</nile-button-toggle>
+        <nile-button-toggle value="option2">Toggle 2</nile-button-toggle>
+        <nile-button-toggle value="option3">Toggle 3</nile-button-toggle>
+      </nile-button-toggle-group>
+    `);
+        const toggles = el.querySelectorAll('nile-button-toggle');
+        toggles[1].click();
+        expect(toggles[1].active).to.be.true;
+        toggles[2].click();
+        expect(toggles[1].active).to.be.false;
+        expect(toggles[2].active).to.be.true;
+    });
+    it('should emit a "nile-change" event when a toggle is activated', async () => {
+        const el = await fixture(html `
+      <nile-button-toggle-group>
+        <nile-button-toggle value="option1">Toggle 1</nile-button-toggle>
+        <nile-button-toggle value="option2">Toggle 2</nile-button-toggle>
+        <nile-button-toggle value="option3">Toggle 3</nile-button-toggle>
+      </nile-button-toggle-group>
+    `);
+        const toggles = el.querySelectorAll('nile-button-toggle');
+        setTimeout(() => toggles[1].click());
+        const event = await oneEvent(el, 'nile-change');
+        expect(event.detail).to.deep.equal({ value: 'option2' });
+    });
+    it('should disable all toggles when the disabled property is set', async () => {
+        const el = await fixture(html `
+      <nile-button-toggle-group disabled>
+        <nile-button-toggle value="option1">Toggle 1</nile-button-toggle>
+        <nile-button-toggle value="option2">Toggle 2</nile-button-toggle>
+        <nile-button-toggle value="option3">Toggle 3</nile-button-toggle>
+      </nile-button-toggle-group>
+    `);
+        const toggles = el.querySelectorAll('nile-button-toggle');
+        toggles.forEach(toggle => {
+            expect(toggle.disabled).to.be.true;
+        });
+    });
+    it('should not toggle the active state if the group is disabled', async () => {
+        const el = await fixture(html `
+      <nile-button-toggle-group disabled>
+        <nile-button-toggle value="option1">Toggle 1</nile-button-toggle>
+        <nile-button-toggle value="option2">Toggle 2</nile-button-toggle>
+        <nile-button-toggle value="option3">Toggle 3</nile-button-toggle>
+      </nile-button-toggle-group>
+    `);
+        const toggles = el.querySelectorAll('nile-button-toggle');
+        toggles[1].click();
+        expect(toggles[1].active).to.be.false;
+    });
+    it('should allow nested content inside button toggles', async () => {
+        const el = await fixture(html `
+      <nile-button-toggle-group>
+        <nile-button-toggle value="option1">
+          <span slot="prefix">Icon 1</span> Toggle 1
+        </nile-button-toggle>
+        <nile-button-toggle value="option2">
+          <span slot="prefix">Icon 2</span> Toggle 2
+        </nile-button-toggle>
+        <nile-button-toggle value="option3">
+          <span slot="prefix">Icon 3</span> Toggle 3
+        </nile-button-toggle>
+      </nile-button-toggle-group>
+    `);
+        const toggles = el.querySelectorAll('nile-button-toggle');
+        expect(toggles[0].querySelector('span[slot="prefix"]').textContent).to.equal('Icon 1');
+        expect(toggles[1].querySelector('span[slot="prefix"]').textContent).to.equal('Icon 2');
+        expect(toggles[2].querySelector('span[slot="prefix"]').textContent).to.equal('Icon 3');
+    });
+});
+//# sourceMappingURL=nile-button-toggle-group.test.js.map

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-toggle-group.test.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,uBAAuB,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AAIpC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;;;;;KAMnD,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAC1D,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;;;;;KAMnD,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAC1D,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACnC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACvC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACrC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACnC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACvC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;KAM5B,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAC1D,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAErC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;KAM5B,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAC1D,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QACrC,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;QAChD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC5E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;KAM5B,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAC1D,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;KAM5B,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAC1D,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;;;;;;;KAY5B,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAQ,CAAC;QACjE,MAAM,CACJ,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,WAAW,CAC5D,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACrB,MAAM,CACJ,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,WAAW,CAC5D,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACrB,MAAM,CACJ,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,WAAW,CAC5D,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect, oneEvent } from '@open-wc/testing';\nimport '../nile-button-toggle';\nimport './nile-button-toggle-group';\nimport { NileButtonToggle } from '../nile-button-toggle';\nimport { NileButtonToggleGroup } from './nile-button-toggle-group';\n\ndescribe('NileButtonToggleGroup', () => {\n  it('should render all button toggles', async () => {\n    const el = await fixture<NileButtonToggleGroup>(html`\n      <nile-button-toggle-group>\n        <nile-button-toggle value=\"option1\">Toggle 1</nile-button-toggle>\n        <nile-button-toggle value=\"option2\">Toggle 2</nile-button-toggle>\n        <nile-button-toggle value=\"option3\">Toggle 3</nile-button-toggle>\n      </nile-button-toggle-group>\n    `);\n\n    const toggles = el.querySelectorAll('nile-button-toggle');\n    expect(toggles.length).to.equal(3);\n  });\n\n  it('should set the correct positions for the toggles', async () => {\n    const el = await fixture<NileButtonToggleGroup>(html`\n      <nile-button-toggle-group>\n        <nile-button-toggle value=\"option1\">Toggle 1</nile-button-toggle>\n        <nile-button-toggle value=\"option2\">Toggle 2</nile-button-toggle>\n        <nile-button-toggle value=\"option3\">Toggle 3</nile-button-toggle>\n      </nile-button-toggle-group>\n    `);\n\n    const toggles = el.querySelectorAll('nile-button-toggle');\n    expect(toggles[0].initial).to.be.true;\n    expect(toggles[0].middle).to.be.false;\n    expect(toggles[0].end).to.be.false;\n    expect(toggles[1].initial).to.be.false;\n    expect(toggles[1].middle).to.be.true;\n    expect(toggles[1].end).to.be.false;\n    expect(toggles[2].initial).to.be.false;\n    expect(toggles[2].middle).to.be.false;\n    expect(toggles[2].end).to.be.true;\n  });\n\n  it('should toggle the active state correctly', async () => {\n    const el = await fixture(html`\n      <nile-button-toggle-group>\n        <nile-button-toggle value=\"option1\">Toggle 1</nile-button-toggle>\n        <nile-button-toggle value=\"option2\">Toggle 2</nile-button-toggle>\n        <nile-button-toggle value=\"option3\">Toggle 3</nile-button-toggle>\n      </nile-button-toggle-group>\n    `);\n\n    const toggles = el.querySelectorAll('nile-button-toggle');\n    toggles[1].click();\n    expect(toggles[1].active).to.be.true;\n\n    toggles[2].click();\n    expect(toggles[1].active).to.be.false;\n    expect(toggles[2].active).to.be.true;\n  });\n\n  it('should emit a \"nile-change\" event when a toggle is activated', async () => {\n    const el = await fixture(html`\n      <nile-button-toggle-group>\n        <nile-button-toggle value=\"option1\">Toggle 1</nile-button-toggle>\n        <nile-button-toggle value=\"option2\">Toggle 2</nile-button-toggle>\n        <nile-button-toggle value=\"option3\">Toggle 3</nile-button-toggle>\n      </nile-button-toggle-group>\n    `);\n\n    const toggles = el.querySelectorAll('nile-button-toggle');\n    setTimeout(() => toggles[1].click());\n    const event = await oneEvent(el, 'nile-change');\n    expect(event.detail).to.deep.equal({ value: 'option2' });\n  });\n\n  it('should disable all toggles when the disabled property is set', async () => {\n    const el = await fixture(html`\n      <nile-button-toggle-group disabled>\n        <nile-button-toggle value=\"option1\">Toggle 1</nile-button-toggle>\n        <nile-button-toggle value=\"option2\">Toggle 2</nile-button-toggle>\n        <nile-button-toggle value=\"option3\">Toggle 3</nile-button-toggle>\n      </nile-button-toggle-group>\n    `);\n\n    const toggles = el.querySelectorAll('nile-button-toggle');\n    toggles.forEach(toggle => {\n      expect(toggle.disabled).to.be.true;\n    });\n  });\n\n  it('should not toggle the active state if the group is disabled', async () => {\n    const el = await fixture(html`\n      <nile-button-toggle-group disabled>\n        <nile-button-toggle value=\"option1\">Toggle 1</nile-button-toggle>\n        <nile-button-toggle value=\"option2\">Toggle 2</nile-button-toggle>\n        <nile-button-toggle value=\"option3\">Toggle 3</nile-button-toggle>\n      </nile-button-toggle-group>\n    `);\n\n    const toggles = el.querySelectorAll('nile-button-toggle');\n    toggles[1].click();\n    expect(toggles[1].active).to.be.false;\n  });\n  \n  it('should allow nested content inside button toggles', async () => {\n    const el = await fixture(html`\n      <nile-button-toggle-group>\n        <nile-button-toggle value=\"option1\">\n          <span slot=\"prefix\">Icon 1</span> Toggle 1\n        </nile-button-toggle>\n        <nile-button-toggle value=\"option2\">\n          <span slot=\"prefix\">Icon 2</span> Toggle 2\n        </nile-button-toggle>\n        <nile-button-toggle value=\"option3\">\n          <span slot=\"prefix\">Icon 3</span> Toggle 3\n        </nile-button-toggle>\n      </nile-button-toggle-group>\n    `);\n\n    const toggles = el.querySelectorAll('nile-button-toggle') as any;\n    expect(\n      toggles[0].querySelector('span[slot=\"prefix\"]').textContent\n    ).to.equal('Icon 1');\n    expect(\n      toggles[1].querySelector('span[slot=\"prefix\"]').textContent\n    ).to.equal('Icon 2');\n    expect(\n      toggles[2].querySelector('span[slot=\"prefix\"]').textContent\n    ).to.equal('Icon 3');\n  });\n});\n"]}