@aquera/nile-elements 1.5.2 → 1.5.4

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

@@ -1,86 +1,546 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import './nile-button'; // Adjust the import path as necessary
+import './nile-button';
 describe('NileButton', () => {
-    it('should render with default properties', async () => {
+    // === RENDERING TESTS ===
+    it('1. should render without errors', async () => {
         const el = await fixture(html `<nile-button></nile-button>`);
         expect(el).to.exist;
+    });
+    it('2. should have a shadow root', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.shadowRoot).to.not.be.null;
+    });
+    it('3. should render a button element by default', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.tagName).to.equal('BUTTON');
+    });
+    it('4. should render an anchor element when href is set', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com"></nile-button>`);
+        const anchor = el.shadowRoot.querySelector('.button');
+        expect(anchor.tagName).to.equal('A');
+    });
+    it('5. should render slot content', async () => {
+        const el = await fixture(html `<nile-button>Click Me</nile-button>`);
+        expect(el.textContent.trim()).to.equal('Click Me');
+    });
+    it('6. should render prefix slot', async () => {
+        const el = await fixture(html `<nile-button><span slot="prefix">P</span>Label</nile-button>`);
+        const prefixSlot = el.shadowRoot.querySelector('slot[name="prefix"]');
+        expect(prefixSlot).to.exist;
+    });
+    it('7. should render suffix slot', async () => {
+        const el = await fixture(html `<nile-button><span slot="suffix">S</span>Label</nile-button>`);
+        const suffixSlot = el.shadowRoot.querySelector('slot[name="suffix"]');
+        expect(suffixSlot).to.exist;
+    });
+    it('8. should render default slot for label', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const labelSlot = el.shadowRoot.querySelector('slot:not([name])');
+        expect(labelSlot).to.exist;
+    });
+    // === DEFAULT PROPERTIES ===
+    it('9. should have variant default to primary', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
         expect(el.variant).to.equal('primary');
+    });
+    it('10. should have size default to medium', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
         expect(el.size).to.equal('medium');
+    });
+    it('11. should have type default to button', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
         expect(el.type).to.equal('button');
+    });
+    it('12. should have disabled default to false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
         expect(el.disabled).to.be.false;
+    });
+    it('13. should have loading default to false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
         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>`);
+    it('14. should have caret default to false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.caret).to.be.false;
+    });
+    it('15. should have outline default to false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.outline).to.be.false;
+    });
+    it('16. should have pill default to false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.pill).to.be.false;
+    });
+    it('17. should have circle default to false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.circle).to.be.false;
+    });
+    it('18. should have name default to empty string', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.name).to.equal('');
+    });
+    it('19. should have value default to empty string', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.value).to.equal('');
+    });
+    it('20. should have href default to empty string', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.href).to.equal('');
+    });
+    it('21. should have hideBorder default to false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.hideBorder).to.be.false;
+    });
+    it('22. should have title default to empty string', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.title).to.equal('');
+    });
+    // === VARIANT TESTS ===
+    it('23. should apply primary variant class', async () => {
+        const el = await fixture(html `<nile-button variant="primary"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--primary')).to.be.true;
+    });
+    it('24. should apply secondary variant class', async () => {
+        const el = await fixture(html `<nile-button variant="secondary"></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 () => {
+    it('25. should apply tertiary variant class', async () => {
+        const el = await fixture(html `<nile-button variant="tertiary"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--tertiary')).to.be.true;
+    });
+    it('26. should apply caution variant class', async () => {
+        const el = await fixture(html `<nile-button variant="caution"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--caution')).to.be.true;
+    });
+    it('27. should apply ghost variant class', async () => {
+        const el = await fixture(html `<nile-button variant="ghost"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--ghost')).to.be.true;
+    });
+    it('28. should apply destructive variant class', async () => {
+        const el = await fixture(html `<nile-button variant="destructive"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--destructive')).to.be.true;
+    });
+    it('29. should apply secondary-grey variant class', async () => {
+        const el = await fixture(html `<nile-button variant="secondary-grey"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--secondary-grey')).to.be.true;
+    });
+    it('30. should apply secondary-blue variant class', async () => {
+        const el = await fixture(html `<nile-button variant="secondary-blue"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--secondary-blue')).to.be.true;
+    });
+    it('31. should reflect variant attribute', async () => {
+        const el = await fixture(html `<nile-button variant="caution"></nile-button>`);
+        expect(el.getAttribute('variant')).to.equal('caution');
+    });
+    // === DISABLED STATE ===
+    it('32. should be disabled when 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;
+    });
+    it('33. should have aria-disabled true when disabled', async () => {
+        const el = await fixture(html `<nile-button disabled></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
         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>`);
+    it('34. should have aria-disabled false when not disabled', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.getAttribute('aria-disabled')).to.equal('false');
+    });
+    it('35. should apply disabled class when disabled', async () => {
+        const el = await fixture(html `<nile-button disabled></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--disabled')).to.be.true;
+    });
+    it('36. should have tabindex -1 when disabled', async () => {
+        const el = await fixture(html `<nile-button disabled></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.getAttribute('tabindex')).to.equal('-1');
+    });
+    it('37. should have tabindex 0 when not disabled', async () => {
+        const el = await fixture(html `<nile-button></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');
+        expect(button.getAttribute('tabindex')).to.equal('0');
+    });
+    it('38. should prevent click events when disabled', async () => {
+        const el = await fixture(html `<nile-button disabled></nile-button>`);
+        let clicked = false;
+        el.addEventListener('click', () => (clicked = true));
+        el.click();
+        expect(clicked).to.be.false;
     });
-    it('should show a spinner when the loading property is set', async () => {
+    it('39. should reflect disabled attribute', async () => {
+        const el = await fixture(html `<nile-button disabled></nile-button>`);
+        expect(el.hasAttribute('disabled')).to.be.true;
+    });
+    // === LOADING STATE ===
+    it('40. should show spinner when loading', 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 () => {
+    it('41. should not show spinner when not loading', 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;
+        const spinner = el.shadowRoot.querySelector('nile-spinner');
+        expect(spinner).to.be.null;
     });
-    it('should simulate a click on the button', async () => {
-        const el = await fixture(html `<nile-button>Click Me</nile-button>`);
+    it('42. should apply loading class when loading', async () => {
+        const el = await fixture(html `<nile-button loading></nile-button>`);
         const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--loading')).to.be.true;
+    });
+    it('43. should prevent click when loading', async () => {
+        const el = await fixture(html `<nile-button loading></nile-button>`);
         let clicked = false;
         el.addEventListener('click', () => (clicked = true));
         el.click();
-        expect(clicked).to.be.true;
+        expect(clicked).to.be.false;
     });
-    it('should focus and blur the button programmatically', async () => {
-        const el = await fixture(html `<nile-button>Click Me</nile-button>`);
+    it('44. should reflect loading attribute', async () => {
+        const el = await fixture(html `<nile-button loading></nile-button>`);
+        expect(el.hasAttribute('loading')).to.be.true;
+    });
+    // === CARET ===
+    it('45. should show caret icon when caret is true', async () => {
+        const el = await fixture(html `<nile-button caret></nile-button>`);
+        const caret = el.shadowRoot.querySelector('nile-icon[part="caret"]');
+        expect(caret).to.exist;
+    });
+    it('46. should not show caret icon when caret is false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const caret = el.shadowRoot.querySelector('nile-icon[part="caret"]');
+        expect(caret).to.be.null;
+    });
+    it('47. should apply caret class when caret is set', async () => {
+        const el = await fixture(html `<nile-button caret></nile-button>`);
         const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--caret')).to.be.true;
+    });
+    // === PILL ===
+    it('48. should apply pill class when pill is true', async () => {
+        const el = await fixture(html `<nile-button pill></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--pill')).to.be.true;
+    });
+    it('49. should reflect pill attribute', async () => {
+        const el = await fixture(html `<nile-button pill></nile-button>`);
+        expect(el.hasAttribute('pill')).to.be.true;
+    });
+    // === CIRCLE ===
+    it('50. should apply circle class when circle is true', async () => {
+        const el = await fixture(html `<nile-button circle></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--circle')).to.be.true;
+    });
+    it('51. should reflect circle attribute', async () => {
+        const el = await fixture(html `<nile-button circle></nile-button>`);
+        expect(el.hasAttribute('circle')).to.be.true;
+    });
+    // === OUTLINE ===
+    it('52. should apply outline class when outline is true', async () => {
+        const el = await fixture(html `<nile-button outline></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--outline')).to.be.true;
+    });
+    it('53. should apply standard class when outline is false', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--standard')).to.be.true;
+    });
+    // === LINK MODE (href) ===
+    it('54. should set href attribute on anchor', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com"></nile-button>`);
+        const anchor = el.shadowRoot.querySelector('.button');
+        expect(anchor.getAttribute('href')).to.equal('https://example.com');
+    });
+    it('55. should set target on anchor', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com" target="_blank"></nile-button>`);
+        const anchor = el.shadowRoot.querySelector('.button');
+        expect(anchor.getAttribute('target')).to.equal('_blank');
+    });
+    it('56. should set role=button on anchor', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com"></nile-button>`);
+        const anchor = el.shadowRoot.querySelector('.button');
+        expect(anchor.getAttribute('role')).to.equal('button');
+    });
+    it('57. should set rel attribute on anchor', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com"></nile-button>`);
+        const anchor = el.shadowRoot.querySelector('.button');
+        expect(anchor.getAttribute('rel')).to.equal('noreferrer noopener');
+    });
+    it('58. should set download attribute on anchor when provided', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com" download="file.pdf"></nile-button>`);
+        const anchor = el.shadowRoot.querySelector('.button');
+        expect(anchor.getAttribute('download')).to.equal('file.pdf');
+    });
+    // === BUTTON TYPE ===
+    it('59. should set button type attribute', async () => {
+        const el = await fixture(html `<nile-button type="submit"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.getAttribute('type')).to.equal('submit');
+    });
+    it('60. should support type=reset', async () => {
+        const el = await fixture(html `<nile-button type="reset"></nile-button>`);
+        expect(el.type).to.equal('reset');
+    });
+    it('61. should set name attribute on button', async () => {
+        const el = await fixture(html `<nile-button name="myButton"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.getAttribute('name')).to.equal('myButton');
+    });
+    it('62. should set value attribute on button', async () => {
+        const el = await fixture(html `<nile-button value="myValue"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.getAttribute('value')).to.equal('myValue');
+    });
+    // === EVENTS ===
+    it('63. should emit nile-focus when focused', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        let focusEmitted = false;
+        el.addEventListener('nile-focus', () => (focusEmitted = true));
+        button.dispatchEvent(new FocusEvent('focus'));
+        expect(focusEmitted).to.be.true;
+    });
+    it('64. should emit nile-blur when blurred', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        let blurEmitted = false;
+        el.addEventListener('nile-blur', () => (blurEmitted = true));
+        button.dispatchEvent(new FocusEvent('blur'));
+        expect(blurEmitted).to.be.true;
+    });
+    it('65. should emit nile-init on connectedCallback', async () => {
+        let initEmitted = false;
+        const container = await fixture(html `<div></div>`);
+        const el = document.createElement('nile-button');
+        el.addEventListener('nile-init', () => (initEmitted = true));
+        container.appendChild(el);
+        await el.updateComplete;
+        expect(initEmitted).to.be.true;
+    });
+    it('66. should emit nile-destroy on disconnectedCallback', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        let destroyEmitted = false;
+        el.addEventListener('nile-destroy', () => (destroyEmitted = true));
+        el.remove();
+        expect(destroyEmitted).to.be.true;
+    });
+    // === FOCUS/BLUR METHODS ===
+    it('67. should focus programmatically', async () => {
+        const el = await fixture(html `<nile-button>Test</nile-button>`);
+        el.focus();
+        await el.updateComplete;
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--focused')).to.be.true;
+    });
+    it('68. should blur programmatically', async () => {
+        const el = await fixture(html `<nile-button>Test</nile-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;
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--focused')).to.be.false;
     });
-    it('should set a custom validation message', async () => {
+    it('69. should click programmatically', async () => {
+        const el = await fixture(html `<nile-button>Test</nile-button>`);
+        let clicked = false;
+        el.addEventListener('click', () => (clicked = true));
+        el.click();
+        expect(clicked).to.be.true;
+    });
+    // === VALIDATION ===
+    it('70. should set 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('Invalid');
+        expect(el.validationMessage).to.equal('Invalid');
         el.setCustomValidity('');
         expect(el.validationMessage).to.equal('');
         document.body.removeChild(form);
     });
+    it('71. should check validity', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.checkValidity()).to.be.true;
+    });
+    it('72. should report validity', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.reportValidity()).to.be.true;
+    });
+    it('73. should get validity state', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.validity).to.exist;
+        expect(el.validity.valid).to.be.true;
+    });
+    // === FORM INTEGRATION ===
+    it('74. should return null getForm when not in a form', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        expect(el.getForm()).to.be.null;
+    });
+    it('75. should set formAction property', async () => {
+        const el = await fixture(html `<nile-button formaction="/submit"></nile-button>`);
+        expect(el.formAction).to.equal('/submit');
+    });
+    it('76. should set formMethod property', async () => {
+        const el = await fixture(html `<nile-button formmethod="post"></nile-button>`);
+        expect(el.formMethod).to.equal('post');
+    });
+    it('77. should set formNoValidate property', async () => {
+        const el = await fixture(html `<nile-button formnovalidate></nile-button>`);
+        expect(el.formNoValidate).to.be.true;
+    });
+    it('78. should set formTarget property', async () => {
+        const el = await fixture(html `<nile-button formtarget="_blank"></nile-button>`);
+        expect(el.formTarget).to.equal('_blank');
+    });
+    it('79. should set formEnctype property', async () => {
+        const el = await fixture(html `<nile-button formenctype="multipart/form-data"></nile-button>`);
+        expect(el.formEnctype).to.equal('multipart/form-data');
+    });
+    // === HIDE BORDER ===
+    it('80. should apply hideborder class when hide-border is set', async () => {
+        const el = await fixture(html `<nile-button hide-border></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--hideborder')).to.be.true;
+    });
+    it('81. should reflect hide-border attribute', async () => {
+        const el = await fixture(html `<nile-button hide-border></nile-button>`);
+        expect(el.hasAttribute('hide-border')).to.be.true;
+    });
+    // === TITLE ===
+    it('82. should set title on internal button', async () => {
+        const el = await fixture(html `<nile-button title="My Title"></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.getAttribute('title')).to.equal('My Title');
+    });
+    // === DYNAMIC PROPERTY CHANGES ===
+    it('83. should update variant dynamically', async () => {
+        const el = await fixture(html `<nile-button variant="primary"></nile-button>`);
+        el.variant = 'secondary';
+        await el.updateComplete;
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--secondary')).to.be.true;
+    });
+    it('84. should update disabled dynamically', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        el.disabled = true;
+        await el.updateComplete;
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.hasAttribute('disabled')).to.be.true;
+    });
+    it('85. should update loading dynamically', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        el.loading = true;
+        await el.updateComplete;
+        const spinner = el.shadowRoot.querySelector('nile-spinner');
+        expect(spinner).to.exist;
+    });
+    it('86. should update caret dynamically', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        el.caret = true;
+        await el.updateComplete;
+        const caret = el.shadowRoot.querySelector('nile-icon[part="caret"]');
+        expect(caret).to.exist;
+    });
+    it('87. should update pill dynamically', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        el.pill = true;
+        await el.updateComplete;
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--pill')).to.be.true;
+    });
+    it('88. should update circle dynamically', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        el.circle = true;
+        await el.updateComplete;
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--circle')).to.be.true;
+    });
+    it('89. should update outline dynamically', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        el.outline = true;
+        await el.updateComplete;
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--outline')).to.be.true;
+    });
+    it('90. should switch from button to anchor when href is set dynamically', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        el.href = 'https://example.com';
+        await el.updateComplete;
+        const anchor = el.shadowRoot.querySelector('.button');
+        expect(anchor.tagName).to.equal('A');
+    });
+    // === CSS PARTS ===
+    it('91. should have base part on button', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const button = el.shadowRoot.querySelector('[part~="base"]');
+        expect(button).to.exist;
+    });
+    it('92. should have prefix part', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const prefix = el.shadowRoot.querySelector('[part~="prefix"]');
+        expect(prefix).to.exist;
+    });
+    it('93. should have label part', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const label = el.shadowRoot.querySelector('[part~="label"]');
+        expect(label).to.exist;
+    });
+    it('94. should have suffix part', async () => {
+        const el = await fixture(html `<nile-button></nile-button>`);
+        const suffix = el.shadowRoot.querySelector('[part~="suffix"]');
+        expect(suffix).to.exist;
+    });
+    it('95. should have caret part when caret is set', async () => {
+        const el = await fixture(html `<nile-button caret></nile-button>`);
+        const caret = el.shadowRoot.querySelector('[part~="caret"]');
+        expect(caret).to.exist;
+    });
+    // === COMBINED STATES ===
+    it('96. should handle disabled and loading together', async () => {
+        const el = await fixture(html `<nile-button disabled loading></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--disabled')).to.be.true;
+        expect(button.classList.contains('button--loading')).to.be.true;
+    });
+    it('97. should handle pill and outline together', async () => {
+        const el = await fixture(html `<nile-button pill outline></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--pill')).to.be.true;
+        expect(button.classList.contains('button--outline')).to.be.true;
+    });
+    it('98. should show caret on link button', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com" caret></nile-button>`);
+        const caret = el.shadowRoot.querySelector('nile-icon[part="caret"]');
+        expect(caret).to.exist;
+    });
+    it('99. should show spinner on link button when loading', async () => {
+        const el = await fixture(html `<nile-button href="https://example.com" loading></nile-button>`);
+        const spinner = el.shadowRoot.querySelector('nile-spinner');
+        expect(spinner).to.exist;
+    });
+    it('100. should handle all visual modifiers simultaneously', async () => {
+        const el = await fixture(html `<nile-button variant="destructive" pill outline caret loading disabled></nile-button>`);
+        const button = el.shadowRoot.querySelector('.button');
+        expect(button.classList.contains('button--destructive')).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;
+        expect(button.classList.contains('button--loading')).to.be.true;
+        expect(button.classList.contains('button--disabled')).to.be.true;
+    });
 });
 //# sourceMappingURL=nile-button.test.js.map