@aquera/nile-elements 2.0.14 → 2.0.16

package/dist/version.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";var e;function n(){var _ref;return(_ref=function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null;}catch(_unused){return null;}}())!==null&&_ref!==void 0?_ref:"1.3.4";}return{setters:[],execute:function execute(){if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:function get(){return e!==null&&e!==void 0?e:n();},set:function set(n){e=n;}}),window.process=window.process||{env:{NODE_ENV:"production"}};}}};});
+System.register([],function(_export,_context){"use strict";var e;function n(){var _ref;return(_ref=function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null;}catch(_unused){return null;}}())!==null&&_ref!==void 0?_ref:"1.3.5";}return{setters:[],execute:function execute(){if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:function get(){return e!==null&&e!==void 0?e:n();},set:function set(n){e=n;}}),window.process=window.process||{env:{NODE_ENV:"production"}};}}};});
 //# sourceMappingURL=version.cjs.js.map

package/dist/version.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.cjs.js","sources":["../../src/version.ts","../../nile/lib/version.js"],"sourcesContent":["// Version utility.\n//\n// NILE_ELEMENTS_VERSION is this package's own version and is still substituted\n// at build time by scripts/replace-version.cjs.\n//\n// The tokens version is read from the loaded Nile stylesheet's --nile-version\n// custom property (stamped by @aquera/nile's scripts/stamp-css-version.mjs),\n// falling back to the @aquera/nile installed alongside this package.\n//\n// Reading the stylesheet is what makes a tokens-only release visible. The\n// imported constant alone is not enough: rollup.config.js bundles\n// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is\n// frozen at this package's build time. The stylesheet is the live source.\nimport { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';\n\nexport const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';\n\nfunction readStylesheetNileVersion(): string | null {\n  if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {\n    return null;\n  }\n\n  try {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue('--nile-version')\n      .trim()\n      .replace(/^[\"']|[\"']$/g, '');\n\n    return value || null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * The version of @aquera/nile (tokens/stylesheets) whose CSS is loaded in the\n * page, falling back to the @aquera/nile bundled into this package when no\n * stamped stylesheet is present.\n *\n * This is the canonical runtime API. It resolves on every call rather than\n * caching, so it is correct even when the Nile stylesheet is added to the page\n * after this module evaluates - which is the common case, and why no\n * module-evaluation-time snapshot of it is exported.\n */\nexport function getNileVersion(): string {\n  return readStylesheetNileVersion() ?? BUILT_IN_NILE_VERSION;\n}\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n\n  // A getter rather than a value, so window.nileVersion reflects whichever\n  // stylesheet is loaded at read time regardless of script/style ordering.\n  let override: string | null = null;\n  Object.defineProperty(window, 'nileVersion', {\n    configurable: true,\n    get: () => override ?? getNileVersion(),\n    set: (value: string) => {\n      override = value;\n    },\n  });\n\n  (window as any).process = (window as any).process || {\n    env: { NODE_ENV: 'production' },\n  };\n}\n","// Generated by scripts/build-version.mjs - do not edit by hand.\nexport const NILE_VERSION = '1.3.4';\n"],"names":["getNileVersion","n","_ref","window","getComputedStyle","document","documentElement","getPropertyValue","trim","replace","_unused","readStylesheetNileVersion","setters","execute","nileElementsVersion","override","Object","defineProperty","configurable","get","set","value","process","env","NODE_ENV"],"mappings":"yEA4CgBA,CAAAA,CACdC,CAAA,CAAA,KAAAC,IAAA,CAAA,OAAAA,IAAA,CA5BF,UACE,CAAA,GAAsB,WAAXC,EAAAA,MAAAA,CAAAA,MAAAA,EAAsD,UAArBC,EAAAA,MAAAA,CAAAA,gBAAAA,CAC1C,MAAO,KAAA,CAGT,GAME,CAAA,MALcA,CAAAA,iBAAiBC,QAASC,CAAAA,eAAAA,CAAAA,CACrCC,gBAAiB,CAAA,gBAAA,CAAA,CACjBC,IACAC,CAAAA,CAAAA,CAAAA,OAAAA,CAAQ,cAAgB,CAAA,EAAA,CAAA,EAEX,IACjB,EAAC,MAAAC,OAAA,CACA,CAAA,MAAO,KACR,EACH,CAaSC,CAAAA,CAAAA,UAAAA,IAAAA,UAAAA,IAAAA,CC5CmB,OD6C5B,EAGA,OAAAC,OAAA,IAAAC,OAAA,UAAAA,QAAA,KAAsB,WAAXV,EAAAA,MAAAA,CAAAA,MAAAA,CAAwB,CAChCA,MAAAA,CAAeW,mBAnCmB,CAAA,2BAAA,CAuC/BC,CAAAA,CAA0B,IAC9BC,CAAAA,MAAAA,CAAOC,cAAed,CAAAA,MAAAA,CAAQ,aAAe,CAAA,CAC3Ce,cAAc,CACdC,CAAAA,GAAAA,CAAK,QAALA,CAAAA,GAAAA,CAAAA,QAAWJ,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAYf,CACvBoB,CAAAA,CAAAA,GAAAA,GAAAA,CAAMC,QAAND,CAAAA,GAAAA,CAAMC,CACJN,CAAAA,CAAAA,CAAAA,CAAWM,CAAK,EAInBlB,CAAAA,CAAAA,CAAAA,MAAAA,CAAemB,OAAWnB,CAAAA,MAAAA,CAAemB,OAAW,EAAA,CACnDC,GAAK,CAAA,CAAEC,SAAU,YAErB,CAAA,CAAA,EAAA"}
+{"version":3,"file":"version.cjs.js","sources":["../../src/version.ts","../../nile/lib/version.js"],"sourcesContent":["// Version utility.\n//\n// NILE_ELEMENTS_VERSION is this package's own version and is still substituted\n// at build time by scripts/replace-version.cjs.\n//\n// The tokens version is read from the loaded Nile stylesheet's --nile-version\n// custom property (stamped by @aquera/nile's scripts/stamp-css-version.mjs),\n// falling back to the @aquera/nile installed alongside this package.\n//\n// Reading the stylesheet is what makes a tokens-only release visible. The\n// imported constant alone is not enough: rollup.config.js bundles\n// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is\n// frozen at this package's build time. The stylesheet is the live source.\nimport { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';\n\nexport const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';\n\nfunction readStylesheetNileVersion(): string | null {\n  if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {\n    return null;\n  }\n\n  try {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue('--nile-version')\n      .trim()\n      .replace(/^[\"']|[\"']$/g, '');\n\n    return value || null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * The version of @aquera/nile (tokens/stylesheets) whose CSS is loaded in the\n * page, falling back to the @aquera/nile bundled into this package when no\n * stamped stylesheet is present.\n *\n * This is the canonical runtime API. It resolves on every call rather than\n * caching, so it is correct even when the Nile stylesheet is added to the page\n * after this module evaluates - which is the common case, and why no\n * module-evaluation-time snapshot of it is exported.\n */\nexport function getNileVersion(): string {\n  return readStylesheetNileVersion() ?? BUILT_IN_NILE_VERSION;\n}\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n\n  // A getter rather than a value, so window.nileVersion reflects whichever\n  // stylesheet is loaded at read time regardless of script/style ordering.\n  let override: string | null = null;\n  Object.defineProperty(window, 'nileVersion', {\n    configurable: true,\n    get: () => override ?? getNileVersion(),\n    set: (value: string) => {\n      override = value;\n    },\n  });\n\n  (window as any).process = (window as any).process || {\n    env: { NODE_ENV: 'production' },\n  };\n}\n","// Generated by scripts/build-version.mjs - do not edit by hand.\nexport const NILE_VERSION = '1.3.5';\n"],"names":["getNileVersion","n","_ref","window","getComputedStyle","document","documentElement","getPropertyValue","trim","replace","_unused","readStylesheetNileVersion","setters","execute","nileElementsVersion","override","Object","defineProperty","configurable","get","set","value","process","env","NODE_ENV"],"mappings":"yEA4CgBA,CAAAA,CACdC,CAAA,CAAA,KAAAC,IAAA,CAAA,OAAAA,IAAA,CA5BF,UACE,CAAA,GAAsB,WAAXC,EAAAA,MAAAA,CAAAA,MAAAA,EAAsD,UAArBC,EAAAA,MAAAA,CAAAA,gBAAAA,CAC1C,MAAO,KAAA,CAGT,GAME,CAAA,MALcA,CAAAA,iBAAiBC,QAASC,CAAAA,eAAAA,CAAAA,CACrCC,gBAAiB,CAAA,gBAAA,CAAA,CACjBC,IACAC,CAAAA,CAAAA,CAAAA,OAAAA,CAAQ,cAAgB,CAAA,EAAA,CAAA,EAEX,IACjB,EAAC,MAAAC,OAAA,CACA,CAAA,MAAO,KACR,EACH,CAaSC,CAAAA,CAAAA,UAAAA,IAAAA,UAAAA,IAAAA,CC5CmB,OD6C5B,EAGA,OAAAC,OAAA,IAAAC,OAAA,UAAAA,QAAA,KAAsB,WAAXV,EAAAA,MAAAA,CAAAA,MAAAA,CAAwB,CAChCA,MAAAA,CAAeW,mBAnCmB,CAAA,2BAAA,CAuC/BC,CAAAA,CAA0B,IAC9BC,CAAAA,MAAAA,CAAOC,cAAed,CAAAA,MAAAA,CAAQ,aAAe,CAAA,CAC3Ce,cAAc,CACdC,CAAAA,GAAAA,CAAK,QAALA,CAAAA,GAAAA,CAAAA,QAAWJ,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAYf,CACvBoB,CAAAA,CAAAA,GAAAA,GAAAA,CAAMC,QAAND,CAAAA,GAAAA,CAAMC,CACJN,CAAAA,CAAAA,CAAAA,CAAWM,CAAK,EAInBlB,CAAAA,CAAAA,CAAAA,MAAAA,CAAemB,OAAWnB,CAAAA,MAAAA,CAAemB,OAAW,EAAA,CACnDC,GAAK,CAAA,CAAEC,SAAU,YAErB,CAAA,CAAA,EAAA"}

package/dist/version.esm.js

@@ -1 +1 @@
-function n(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.4"}if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??n(),set:n=>{e=n}}),window.process=window.process||{env:{NODE_ENV:"production"}}}
+function n(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.5"}if("undefined"!=typeof window){window.nileElementsVersion="__NILE_ELEMENTS_VERSION__";let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??n(),set:n=>{e=n}}),window.process=window.process||{env:{NODE_ENV:"production"}}}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-badge/nile-badge.css.ts

@@ -63,11 +63,11 @@ export const styles = css`
   }
 
   .badge--orange {
-    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
+    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-error-600));
     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));
+    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-300));
+    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-50));
   }
 
   .badge--purple {
@@ -120,7 +120,7 @@ export const styles = css`
     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));
+    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-300));
     background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
   }
 
@@ -153,7 +153,7 @@ export const styles = css`
   }
 
   .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));
+    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-300));
   }
 
   .badge--purple.badge--pill-outline {
@@ -181,7 +181,7 @@ export const styles = css`
   }
 
   .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));
+    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-300));
   }
 
   .badge--error.badge--pill-outline {
@@ -202,6 +202,27 @@ export const styles = css`
     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));
   }
+
+  /* Sizes — md is the base .badge rule above, so the default is unchanged. */
+  .badge.badge--sm {
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-height-22px, var(--ng-height-22px));
+  }
+
+  .badge--sm .badge__content {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-xs));
+  }
+
+  .badge.badge--lg {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: var(--nile-height-28px, var(--ng-height-28px));
+  }
+
+  .badge--lg .badge__content {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+  }
 `;
 export default [styles];
 

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

@@ -1,6 +1,7 @@
 import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
 import './nile-badge';
 import NileBadge from './nile-badge';
+import { styles } from './nile-badge.css';
 
 describe('NileBadge', () => {
   // === RENDERING ===
@@ -657,4 +658,90 @@ describe('NileBadge', () => {
     const el = await fixture<NileBadge>(html`<nile-badge>\u2713 Done</nile-badge>`);
     expect(el.textContent).to.contain('\u2713');
   });
+
+  // === SIZE TESTS ===
+  it('101. should have size default to md', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge></nile-badge>`);
+    expect(el.size).to.equal('md');
+    const span = el.shadowRoot!.querySelector('span');
+    expect(span!.classList.contains('badge--md')).to.be.true;
+  });
+
+  it('102. should reflect size attribute', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge size="lg"></nile-badge>`);
+    expect(el.getAttribute('size')).to.equal('lg');
+  });
+
+  for (const size of ['sm', 'md', 'lg'] as const) {
+    it(`103. should apply only the ${size} size class`, async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge size=${size}>Label</nile-badge>`);
+      const span = el.shadowRoot!.querySelector('span')!;
+      for (const other of ['sm', 'md', 'lg']) {
+        expect(span.classList.contains(`badge--${other}`)).to.equal(other === size);
+      }
+    });
+  }
+
+  it('104. should update size class when size changes', async () => {
+    const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+    el.size = 'sm';
+    await elementUpdated(el);
+    const span = el.shadowRoot!.querySelector('span')!;
+    expect(span.classList.contains('badge--sm')).to.be.true;
+    expect(span.classList.contains('badge--md')).to.be.false;
+  });
+
+  describe('size dimensions (nxtgen tokens)', () => {
+    let tokens: HTMLStyleElement;
+
+    before(() => {
+      tokens = document.createElement('style');
+      tokens.textContent = `:root {
+        --ng-height-22px: 22px; --ng-height-24px: 24px; --ng-height-28px: 28px;
+        --ng-spacing-xxs: 2px; --ng-spacing-xs: 4px; --ng-spacing-md: 8px;
+        --ng-spacing-md-alt: 10px; --ng-spacing-lg: 12px;
+      }`;
+      document.head.appendChild(tokens);
+    });
+
+    after(() => tokens.remove());
+
+    it('105. should render 22px, 24px and 28px tall for sm, md and lg', async () => {
+      const heights: number[] = [];
+      for (const size of ['sm', 'md', 'lg']) {
+        const el = await fixture<NileBadge>(html`<nile-badge size=${size}>Label</nile-badge>`);
+        heights.push(el.shadowRoot!.querySelector('span')!.getBoundingClientRect().height);
+      }
+      expect(heights).to.deep.equal([22, 24, 28]);
+    });
+
+    it('106. should keep size padding when rounded', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge size="lg" rounded>Label</nile-badge>`);
+      const style = getComputedStyle(el.shadowRoot!.querySelector('span')!);
+      expect(style.paddingTop).to.equal('4px');
+      expect(style.paddingLeft).to.equal('12px');
+    });
+  });
+
+  describe('error / orange / warning colour tokens', () => {
+    const css = styles.cssText;
+    const rule = (selector: string) => css.slice(css.indexOf(`${selector} {`)).split('}')[0];
+    const ng = (token: string) => `var(--ng-componentcolors-utility-${token})`;
+
+    const cases: [string, string, string, string][] = [
+      ['error', 'error-50', 'error-200', 'error-700'],
+      ['orange', 'orange-50', 'orange-300', 'error-600'],
+      ['warning', 'warning-50', 'warning-300', 'warning-700'],
+    ];
+
+    cases.forEach(([variant, fill, border, text], i) => {
+      it(`${107 + i}. should map ${variant} to ${fill} / ${border} / ${text}`, () => {
+        const base = rule(`.badge--${variant}`);
+        expect(base).to.contain(`background-${variant}, ${ng(fill)})`);
+        expect(base).to.contain(`border-color-${variant}, ${ng(border)})`);
+        expect(base).to.contain(`font-${variant}, ${ng(text)})`);
+        expect(rule(`.badge--${variant}.badge--pill-outline`)).to.contain(`pill-outline-${variant}, ${ng(border)})`);
+      });
+    });
+  });
 });

package/src/nile-badge/nile-badge.ts

@@ -84,6 +84,9 @@ export class NileBadge extends NileElement {
     | 'pill-outline'
     | 'badge-color'='badge-color';
 
+  /** The badge's size. `md` keeps the existing default dimensions. */
+  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+
   render() {
     return html`
       <span
@@ -111,6 +114,9 @@ export class NileBadge extends NileElement {
             this.rounded ||
             this.pilltype == 'pill-outline' ||
             this.pilltype == 'pill-color',
+          'badge--sm': this.size === 'sm',
+          'badge--md': this.size === 'md',
+          'badge--lg': this.size === 'lg',
         })}
       >
         <slot part="content" class="badge__content"></slot>

package/src/nile-lite-tooltip/nile-lite-tooltip.css.ts

@@ -19,7 +19,7 @@ export const styles = css`
   .tippy-box {
     position: relative;
     background-color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary-solid));
-    color: var(--nile-colors-dark-200, var(--ng-colors-text-primary-on-brand));
+    color: var(--nile-colors-dark-200, var(--ng-colors-text-white));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-xs));

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -63,7 +63,7 @@ export const styles = css`
     font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-semibold));
     line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));
     padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-primary-on-brand));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     pointer-events: none;
     word-break: break-word;
     font-family: var(--nile-font-family-inherit, var(--ng-font-family-body));

package/vscode-html-custom-data.json

@@ -496,7 +496,7 @@
     },
     {
       "name": "nile-badge",
-      "description": "Events:\n\n  * `nile-remove` {} - Emitted when the remove button is activated.\n\nSlots:\n\n  * ` ` {} - The badge's content.\n\nAttributes:\n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\nProperties:\n\n  * `styles` - \n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-remove` {} - Emitted when the remove button is activated.\n\nSlots:\n\n  * ` ` {} - The badge's content.\n\nAttributes:\n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\nProperties:\n\n  * `styles` - \n\n  * `variant` {`\"primary\" | \"success\" | \"normal\" | \"warning\" | \"error\" | \"info\" | \"gray\" | \"brand\" | \"blue-light\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\" | \"blue-gray\" | \"gray-blue\"`} - The badge's theme variant.\n\n  * `rounded` {`boolean`} - Draws a pill-style badge with rounded edges.\n\n  * `pilltype` {`\"pill-color\" | \"pill-outline\" | \"badge-color\"`} - \n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "variant",
@@ -572,6 +572,21 @@
             }
           ]
         },
+        {
+          "name": "size",
+          "description": "`size` {`\"sm\" | \"md\" | \"lg\"`} - The badge's size. `md` keeps the existing default dimensions.\n\nProperty: size\n\nDefault: md",
+          "values": [
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "lg"
+            }
+          ]
+        },
         {
           "name": "onnile-remove",
           "description": "`nile-remove` {} - Emitted when the remove button is activated."