@aquera/nile-elements 2.0.18 → 2.0.20

package/dist/utilities/animation-registry.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";var n,t;function o(n,t){return"rtl"===t.toLowerCase()?{keyframes:n.rtlKeyframes||n.keyframes,options:n.options}:n;}function r(t,o){n.set(t,function(n){return n!==null&&n!==void 0?n:{keyframes:[],options:{duration:0}};}(o));}function e(r,e,s){var a=t.get(r);if(a!==null&&a!==void 0&&a[e])return o(a[e],s.dir);var i=n.get(e);return i?o(i,s.dir):{keyframes:[],options:{duration:0}};}_export({g:e,s:r});return{setters:[],execute:function execute(){n=new Map(),t=new WeakMap();}};});
+System.register([],function(_export,_context){"use strict";var n,t;function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable;})),t.push.apply(t,o);}return t;}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r));});}return e;}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function o(n){return n!==null&&n!==void 0?n:{keyframes:[],options:{duration:0}};}function r(n,t){return"rtl"===t.toLowerCase()?{keyframes:n.rtlKeyframes||n.keyframes,options:n.options}:n;}function e(t,r){n.set(t,o(r));}function s(n,r,e){t.set(n,_objectSpread(_objectSpread({},t.get(n)),{},_defineProperty({},r,o(e))));}function a(o,e,s){var a=t.get(o);if(a!==null&&a!==void 0&&a[e])return r(a[e],s.dir);var i=n.get(e);return i?r(i,s.dir):{keyframes:[],options:{duration:0}};}_export({a:s,g:a,s:e});return{setters:[],execute:function execute(){n=new Map(),t=new WeakMap();}};});
 //# sourceMappingURL=animation-registry.cjs.js.map

package/dist/utilities/animation-registry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation-registry.cjs.js","sources":["../../../src/utilities/animation-registry.ts"],"sourcesContent":["export interface ElementAnimation {\n  keyframes: Keyframe[];\n  rtlKeyframes?: Keyframe[];\n  options?: KeyframeAnimationOptions;\n}\n\nexport interface ElementAnimationMap {\n  [animationName: string]: ElementAnimation;\n}\n\nexport interface GetAnimationOptions {\n  /**\n   * The component's directionality. When set to \"rtl\", `rtlKeyframes` will be preferred over `keyframes` where\n   * available using getAnimation().\n   */\n  dir: string;\n}\n\nconst defaultAnimationRegistry = new Map<string, ElementAnimation>();\nconst customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();\n\nfunction ensureAnimation(animation: ElementAnimation | null) {\n  return animation ?? { keyframes: [], options: { duration: 0 } };\n}\n\n//\n// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either\n// keyframes or rtlKeyframes depending on the specified directionality.\n//\nfunction getLogicalAnimation(animation: ElementAnimation, dir: string) {\n  if (dir.toLowerCase() === 'rtl') {\n    return {\n      keyframes: animation.rtlKeyframes || animation.keyframes,\n      options: animation.options\n    };\n  }\n\n  return animation;\n}\n\n/**\n * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`\n * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.\n */\nexport function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {\n  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));\n}\n\n/** Sets a custom animation for the specified element. */\nexport function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {\n  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });\n}\n\n/** Gets an element's animation. Falls back to the default if no animation is found. */\nexport function getAnimation(el: Element, animationName: string, options: GetAnimationOptions) {\n  const customAnimation = customAnimationRegistry.get(el);\n\n  // Check for a custom animation\n  if (customAnimation?.[animationName]) {\n    return getLogicalAnimation(customAnimation[animationName], options.dir);\n  }\n\n  // Check for a default animation\n  const defaultAnimation = defaultAnimationRegistry.get(animationName);\n  if (defaultAnimation) {\n    return getLogicalAnimation(defaultAnimation, options.dir);\n  }\n\n  // Fall back to an empty animation\n  return {\n    keyframes: [],\n    options: { duration: 0 }\n  };\n}\n"],"names":["getLogicalAnimation","animation","dir","toLowerCase","keyframes","rtlKeyframes","options","setDefaultAnimation","animationName","defaultAnimationRegistry","set","duration","ensureAnimation","getAnimation","el","customAnimation","customAnimationRegistry","get","defaultAnimation","Map","WeakMap"],"mappings":"mEA6BA,QAASA,CAAAA,CAAoBC,CAAAA,CAAAA,CAA6BC,CACxD,CAAA,CAAA,MAA0B,QAAtBA,CAAIC,CAAAA,WAAAA,CAAAA,CAAAA,CACC,CACLC,SAAWH,CAAAA,CAAAA,CAAUI,cAAgBJ,CAAUG,CAAAA,SAAAA,CAC/CE,OAASL,CAAAA,CAAAA,CAAUK,SAIhBL,CACT,EAMgB,QAAAM,CAAAA,CAAoBC,CAAAA,CAAAA,CAAuBP,GACzDQ,CAAyBC,CAAAA,GAAAA,CAAIF,CAxB/B,CAAA,SAAyBP,GACvB,MAAOA,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAa,CAAEG,SAAW,CAAA,EAAA,CAAIE,QAAS,CAAEK,QAAAA,CAAU,CAC5D,CAAA,CAAA,EAsB8CC,CAAgBX,CAC9D,CAAA,CAAA,UAQgBY,CAAAA,CAAaC,CAAAA,CAAAA,CAAaN,EAAuBF,CAC/D,CAAA,CAAA,GAAMS,CAAAA,CAAkBC,CAAAA,CAAAA,CAAwBC,IAAIH,CAGpD,CAAA,CAAA,GAAIC,UAAAA,YAAAA,EAAkBP,CACpB,CAAA,CAAA,MAAOR,CAAAA,EAAoBe,CAAgBP,CAAAA,CAAAA,CAAAA,CAAgBF,CAAQJ,CAAAA,GAAAA,CAAAA,CAIrE,GAAMgB,CAAAA,CAAmBT,CAAAA,CAAAA,CAAyBQ,IAAIT,CACtD,CAAA,CAAA,MAAIU,CAAAA,EACKlB,CAAoBkB,CAAAA,CAAAA,CAAkBZ,EAAQJ,GAIhD,CAAA,CAAA,CACLE,UAAW,EACXE,CAAAA,OAAAA,CAAS,CAAEK,QAAU,CAAA,CAAA,CAAA,CAEzB,kEAvDMF,EAA2B,GAAIU,CAAAA,GAAAA,CAAAA,CAAAA,CAC/BH,EAA0B,GAAII,CAAAA,OAAAA,CAAAA,CAAAA"}
+{"version":3,"file":"animation-registry.cjs.js","sources":["../../../src/utilities/animation-registry.ts"],"sourcesContent":["export interface ElementAnimation {\n  keyframes: Keyframe[];\n  rtlKeyframes?: Keyframe[];\n  options?: KeyframeAnimationOptions;\n}\n\nexport interface ElementAnimationMap {\n  [animationName: string]: ElementAnimation;\n}\n\nexport interface GetAnimationOptions {\n  /**\n   * The component's directionality. When set to \"rtl\", `rtlKeyframes` will be preferred over `keyframes` where\n   * available using getAnimation().\n   */\n  dir: string;\n}\n\nconst defaultAnimationRegistry = new Map<string, ElementAnimation>();\nconst customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();\n\nfunction ensureAnimation(animation: ElementAnimation | null) {\n  return animation ?? { keyframes: [], options: { duration: 0 } };\n}\n\n//\n// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either\n// keyframes or rtlKeyframes depending on the specified directionality.\n//\nfunction getLogicalAnimation(animation: ElementAnimation, dir: string) {\n  if (dir.toLowerCase() === 'rtl') {\n    return {\n      keyframes: animation.rtlKeyframes || animation.keyframes,\n      options: animation.options\n    };\n  }\n\n  return animation;\n}\n\n/**\n * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`\n * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.\n */\nexport function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {\n  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));\n}\n\n/** Sets a custom animation for the specified element. */\nexport function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {\n  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });\n}\n\n/** Gets an element's animation. Falls back to the default if no animation is found. */\nexport function getAnimation(el: Element, animationName: string, options: GetAnimationOptions) {\n  const customAnimation = customAnimationRegistry.get(el);\n\n  // Check for a custom animation\n  if (customAnimation?.[animationName]) {\n    return getLogicalAnimation(customAnimation[animationName], options.dir);\n  }\n\n  // Check for a default animation\n  const defaultAnimation = defaultAnimationRegistry.get(animationName);\n  if (defaultAnimation) {\n    return getLogicalAnimation(defaultAnimation, options.dir);\n  }\n\n  // Fall back to an empty animation\n  return {\n    keyframes: [],\n    options: { duration: 0 }\n  };\n}\n"],"names":["ensureAnimation","animation","keyframes","options","duration","getLogicalAnimation","dir","toLowerCase","rtlKeyframes","setDefaultAnimation","animationName","defaultAnimationRegistry","set","setAnimation","el","customAnimationRegistry","get","getAnimation","customAnimation","defaultAnimation","Map","WeakMap"],"mappings":"+8CAqBA,QAASA,CAAAA,CAAgBC,CAAAA,CAAAA,CAAAA,CACvB,MAAOA,CAAAA,CAAAA,SAAAA,CAAAA,UAAAA,CAAAA,CAAa,CAAEC,SAAW,CAAA,EAAA,CAAIC,OAAS,CAAA,CAAEC,QAAU,CAAA,CAAA,CAAA,CAC5D,EAMA,QAASC,CAAAA,CAAAA,CAAoBJ,CAA6BK,CAAAA,CAAAA,CAAAA,CACxD,MAA0B,KAAA,GAAtBA,EAAIC,WACC,CAAA,CAAA,CAAA,CACLL,UAAWD,CAAUO,CAAAA,YAAAA,EAAgBP,EAAUC,SAC/CC,CAAAA,OAAAA,CAASF,CAAUE,CAAAA,OAAAA,CAAAA,CAIhBF,CACT,EAMgB,QAAAQ,CAAAA,CAAoBC,CAAAA,CAAAA,CAAuBT,CACzDU,CAAAA,CAAAA,CAAAA,CAAyBC,GAAIF,CAAAA,CAAAA,CAAeV,EAAgBC,CAC9D,CAAA,CAAA,UAGgBY,CAAAA,CAAAA,CAAaC,CAAaJ,CAAAA,CAAAA,CAAuBT,GAC/Dc,CAAwBH,CAAAA,GAAAA,CAAIE,iCAASC,CAAAA,CAAwBC,IAAIF,CAAKJ,CAAAA,KAAAA,eAAAA,IAACA,CAAgBV,CAAAA,CAAAA,CAAgBC,CACzG,CAAA,EAAA,CAAA,UAGgBgB,CAAAA,CAAaH,CAAAA,CAAAA,CAAaJ,CAAuBP,CAAAA,CAAAA,CAAAA,CAC/D,GAAMe,CAAAA,CAAAA,CAAkBH,EAAwBC,GAAIF,CAAAA,CAAAA,CAAAA,CAGpD,GAAII,CAAAA,SAAAA,CAAAA,WAAAA,CAAAA,CAAkBR,CACpB,CAAA,CAAA,MAAOL,CAAAA,EAAoBa,CAAgBR,CAAAA,CAAAA,CAAAA,CAAgBP,EAAQG,GAIrE,CAAA,CAAA,GAAMa,CAAAA,EAAmBR,CAAyBK,CAAAA,GAAAA,CAAIN,CACtD,CAAA,CAAA,MAAIS,CAAAA,CACKd,CAAAA,CAAAA,CAAoBc,EAAkBhB,CAAQG,CAAAA,GAAAA,CAAAA,CAIhD,CACLJ,SAAAA,CAAW,EACXC,CAAAA,OAAAA,CAAS,CAAEC,QAAU,CAAA,CAAA,CAAA,CAEzB,sEAvDMO,CAAAA,CAA2B,GAAIS,CAAAA,GAC/BL,CAAAA,CAAAA,CAAAA,CAAAA,CAA0B,GAAIM,CAAAA,OAEpC,CAAA,CAAA"}

package/dist/utilities/animation-registry.esm.js

@@ -1 +1 @@
-const n=new Map,t=new WeakMap;function o(n,t){return"rtl"===t.toLowerCase()?{keyframes:n.rtlKeyframes||n.keyframes,options:n.options}:n}function r(t,o){n.set(t,function(n){return n??{keyframes:[],options:{duration:0}}}(o))}function e(r,e,s){const a=t.get(r);if(a?.[e])return o(a[e],s.dir);const i=n.get(e);return i?o(i,s.dir):{keyframes:[],options:{duration:0}}}export{e as g,r as s};
+const n=new Map,t=new WeakMap;function o(n){return n??{keyframes:[],options:{duration:0}}}function r(n,t){return"rtl"===t.toLowerCase()?{keyframes:n.rtlKeyframes||n.keyframes,options:n.options}:n}function e(t,r){n.set(t,o(r))}function s(n,r,e){t.set(n,{...t.get(n),[r]:o(e)})}function a(o,e,s){const a=t.get(o);if(a?.[e])return r(a[e],s.dir);const i=n.get(e);return i?r(i,s.dir):{keyframes:[],options:{duration:0}}}export{s as a,a as g,e as s};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.18",
+  "version": "2.0.20",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -134,6 +134,7 @@
     "./nile-color-swatch": "./dist/src/nile-color-swatch/index.js",
     "./nile-tree": "./dist/src/nile-tree/index.js",
     "./nile-tree-item": "./dist/src/nile-tree-item/index.js",
+    "./nile-date-time-picker": "./dist/src/nile-date-time-picker/index.js",
     "./nile-wysiwyg-editor": "./dist/src/nile-wysiwyg-editor/index.js",
     "./nile-wysiwyg-toolbar": "./dist/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/index.js",
     "./nile-app-shell": "./dist/src/nile-app-shell/index.js",
@@ -197,6 +198,7 @@
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
+    "@aquera/nile-glyph": "^1.0.9",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^8.0.2",
     "@open-wc/testing": "^3.1.6",

package/scripts/coverage-report.mjs

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+// Builds coverage.json (consumed by the ui-playground Metrics > Testing tab) from the
+// wtr lcov report, the Istanbul coverage-final.json (statements) and the test runner output.
+// Usage (from a package dir): node scripts/coverage-report.mjs <lcov.info> <test-output.txt> <out.json>
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { execSync } from 'node:child_process';
+import { dirname, join } from 'node:path';
+
+const [lcovPath = 'coverage/lcov.info', outputPath, outPath = 'coverage/coverage.json'] = process.argv.slice(2);
+// Run from the package directory (cwd), so this script can be shared by other packages.
+const pkg = JSON.parse(readFileSync('package.json', 'utf8'));
+
+const ratio = (covered, total) => ({ covered, total, pct: total ? Math.round((covered / total) * 10000) / 100 : 100 });
+// sMissing counts files without statement data, so a group's statements become null instead of a false 100%.
+const blank = () => ({ files: 0, sMissing: 0, SH: 0, SF: 0, LH: 0, LF: 0, BRH: 0, BRF: 0, FNH: 0, FNF: 0 });
+const relPath = p => p.replace(/\\/g, '/').replace(/^.*?(?:^|\/)src\//, '');
+
+// Statements: lcov has no statement metric, so read them from Istanbul's coverage-final.json.
+const statements = new Map();
+const finalPath = join(dirname(lcovPath), 'coverage-final.json');
+try {
+  const final = JSON.parse(readFileSync(finalPath, 'utf8'));
+  for (const [file, data] of Object.entries(final)) {
+    const counts = Object.values(data.s ?? {});
+    statements.set(relPath(file), { SH: counts.filter(c => c > 0).length, SF: counts.length });
+  }
+} catch (e) {
+  statements.clear();
+  console.warn(`statements unavailable: cannot read ${finalPath} (${e.code ?? e.message})`);
+}
+
+const files = new Map();
+let current = null;
+for (const line of readFileSync(lcovPath, 'utf8').split('\n')) {
+  const [key, value] = [line.slice(0, line.indexOf(':')), line.slice(line.indexOf(':') + 1)];
+  if (key === 'SF') {
+    const rel = relPath(value);
+    const st = statements.get(rel);
+    current = { ...blank(), ...(st ?? { sMissing: 1 }), files: 1 };
+    files.set(rel, current);
+  } else if (current && key in current && key !== 'files') {
+    current[key] += Number(value) || 0;
+  } else if (line === 'end_of_record') {
+    current = null;
+  }
+}
+
+const metrics = g => ({
+  statements: g.sMissing ? null : ratio(g.SH, g.SF),
+  lines: ratio(g.LH, g.LF),
+  branches: ratio(g.BRH, g.BRF),
+  functions: ratio(g.FNH, g.FNF),
+});
+
+const groups = new Map();
+const sum = blank();
+const fileRows = [...files].map(([name, g]) => {
+  // Only real component folders (src/nile-*/) get a component row; shared code (internal, utilities, slot,
+  // version, index) is still in totals and files.
+  const group = name.split('/')[0];
+  const isComponent = name.includes('/') && group.startsWith('nile-');
+  if (isComponent && !groups.has(group)) groups.set(group, blank());
+  for (const k of Object.keys(sum)) {
+    if (isComponent) groups.get(group)[k] += g[k];
+    sum[k] += g[k];
+  }
+  return { name, ...metrics(g) };
+}).sort((a, b) => a.name.localeCompare(b.name));
+
+const components = [...groups].map(([name, g]) => ({ name, files: g.files, ...metrics(g) }))
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+// null when the counts cannot be parsed, so a broken run is not reported as "0 tests".
+let tests = null;
+if (outputPath && existsSync(outputPath)) {
+  const text = readFileSync(outputPath, 'utf8').replace(/\x1B\[[0-9;]*[mK]/g, '');
+  const summary = text.split('\n').filter(l => /\d+\s+passed.*\d+\s+failed/.test(l)).pop();
+  const passed = summary?.match(/(\d+)\s+passed/)?.[1];
+  const failed = summary?.match(/(\d+)\s+failed/)?.[1];
+  if (passed !== undefined && failed !== undefined) tests = { passed: Number(passed), failed: Number(failed), total: Number(passed) + Number(failed) };
+}
+
+const git = cmd => { try { return execSync(cmd, { encoding: 'utf8' }).trim(); } catch { return ''; } };
+const report = {
+  package: pkg.name,
+  version: pkg.version,
+  branch: process.env.BITBUCKET_BRANCH || git('git rev-parse --abbrev-ref HEAD'),
+  commit: (process.env.BITBUCKET_COMMIT || git('git rev-parse HEAD')).slice(0, 7),
+  generatedAt: new Date().toISOString(),
+  tests,
+  totals: { files: sum.files, ...metrics(sum) },
+  components,
+  files: fileRows,
+};
+writeFileSync(outPath, JSON.stringify(report, null, 2) + '\n');
+console.log(`coverage.json: ${fileRows.length} files, ${components.length} components, ${report.totals.lines.pct}% lines, ${report.totals.statements ? `${report.totals.statements.pct}%` : 'n/a'} statements, ${tests?.total ?? 'n/a'} tests -> ${outPath}`);

package/src/index.ts

@@ -154,6 +154,7 @@ export { NileInlineSidebarItemHeader } from './nile-inline-sidebar-item-header';
 export { NileInlineSidebarItemBody } from './nile-inline-sidebar-item-body';
 export { NileMarkdown } from './nile-markdown';
 export { NileMarkdownEditor } from './nile-markdown-editor';
+export { NileDateTimePicker } from './nile-date-time-picker';
 
 // nile-wysiwyg-editor — ProseMirror-powered rich text editor
 export {

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

@@ -27,7 +27,24 @@ export const styles = css`
     height: var(--nile-height-22px, var(--ng-height-24px));
   }
 
-  .badge__content {
+  .badge__prefix,
+  .badge__suffix {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+  .badge--has-prefix .badge__prefix {
+    margin-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  .badge--has-suffix .badge__suffix {
+    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  .badge__prefix,
+  .badge__content,
+  .badge__suffix {
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     font-style: normal;
@@ -209,7 +226,9 @@ export const styles = css`
     height: var(--nile-height-22px, var(--ng-height-22px));
   }
 
-  .badge--sm .badge__content {
+  .badge--sm .badge__prefix,
+  .badge--sm .badge__content,
+  .badge--sm .badge__suffix {
     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));
   }
@@ -219,7 +238,9 @@ export const styles = css`
     height: var(--nile-height-28px, var(--ng-height-28px));
   }
 
-  .badge--lg .badge__content {
+  .badge--lg .badge__prefix,
+  .badge--lg .badge__content,
+  .badge--lg .badge__suffix {
     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));
   }

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

@@ -744,4 +744,106 @@ describe('NileBadge', () => {
       });
     });
   });
+
+  describe('prefix and suffix slots', () => {
+    const base = (el: NileBadge) => el.shadowRoot!.querySelector('[part="base"]')!;
+    const slotOf = (el: NileBadge, name: string) =>
+      el.shadowRoot!.querySelector<HTMLSlotElement>(`slot[name="${name}"]`)!;
+
+    it('110. should render prefix and suffix slots with parts', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+      expect(slotOf(el, 'prefix').getAttribute('part')).to.equal('prefix');
+      expect(slotOf(el, 'suffix').getAttribute('part')).to.equal('suffix');
+    });
+
+    it('111. should render prefix before content and suffix after it', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+      const parts = [...base(el).children].map(n => n.getAttribute('part'));
+      expect(parts).to.deep.equal(['prefix', 'content', 'suffix']);
+    });
+
+    it('112. should assign prefix content to the prefix slot', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge><span slot="prefix" id="p">●</span>Label</nile-badge>`);
+      const assigned = slotOf(el, 'prefix').assignedElements();
+      expect(assigned).to.have.length(1);
+      expect(assigned[0].id).to.equal('p');
+    });
+
+    it('113. should assign suffix content to the suffix slot', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge>Label<span slot="suffix" id="s">3</span></nile-badge>`);
+      const assigned = slotOf(el, 'suffix').assignedElements();
+      expect(assigned).to.have.length(1);
+      expect(assigned[0].id).to.equal('s');
+    });
+
+    it('114. should accept any element in the slots', async () => {
+      const el = await fixture<NileBadge>(html`
+        <nile-badge>
+          <img slot="prefix" alt="" />
+          Label
+          <button slot="suffix">x</button>
+        </nile-badge>
+      `);
+      expect(slotOf(el, 'prefix').assignedElements()[0].tagName).to.equal('IMG');
+      expect(slotOf(el, 'suffix').assignedElements()[0].tagName).to.equal('BUTTON');
+    });
+
+    it('115. should not add has-prefix or has-suffix classes when slots are empty', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+      expect(base(el).classList.contains('badge--has-prefix')).to.be.false;
+      expect(base(el).classList.contains('badge--has-suffix')).to.be.false;
+    });
+
+    it('116. should add has-prefix and has-suffix classes when slots are filled', async () => {
+      const el = await fixture<NileBadge>(html`
+        <nile-badge><span slot="prefix">a</span>Label<span slot="suffix">b</span></nile-badge>
+      `);
+      expect(base(el).classList.contains('badge--has-prefix')).to.be.true;
+      expect(base(el).classList.contains('badge--has-suffix')).to.be.true;
+    });
+
+    it('117. should update classes when slot content is added later', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+      const icon = document.createElement('span');
+      icon.slot = 'prefix';
+      el.prepend(icon);
+      await elementUpdated(el);
+      await el.updateComplete;
+      expect(base(el).classList.contains('badge--has-prefix')).to.be.true;
+    });
+
+    it('118. should take no space when prefix and suffix are empty', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge>Label</nile-badge>`);
+      expect(slotOf(el, 'prefix').getBoundingClientRect().width).to.equal(0);
+      expect(slotOf(el, 'suffix').getBoundingClientRect().width).to.equal(0);
+    });
+
+    it('119. should space filled slots from the content with the spacing token', () => {
+      const css = styles.cssText;
+      const rule = (selector: string) => css.slice(css.indexOf(`${selector} {`)).split('}')[0];
+      const token = 'var(--nile-spacing-xs, var(--ng-spacing-xs))';
+      expect(rule('.badge--has-prefix .badge__prefix')).to.contain(`margin-inline-end: ${token}`);
+      expect(rule('.badge--has-suffix .badge__suffix')).to.contain(`margin-inline-start: ${token}`);
+    });
+
+    it('120. should keep slot content out of the aria-label', async () => {
+      const el = await fixture<NileBadge>(html`
+        <nile-badge><span slot="prefix">icon</span>Active<span slot="suffix">12</span></nile-badge>
+      `);
+      expect(el.getAttribute('aria-label')).to.equal('Active');
+    });
+    it('121. should ignore comment nodes in the aria-label', async () => {
+      const el = document.createElement('nile-badge') as NileBadge;
+      el.append(document.createComment('?lit$123$'), 'Active', document.createComment('ng-container'));
+      document.body.append(el);
+      await el.updateComplete;
+      expect(el.getAttribute('aria-label')).to.equal('Active');
+      el.remove();
+    });
+
+    it('122. should keep the existing label for badges without slots', async () => {
+      const el = await fixture<NileBadge>(html`<nile-badge>New <b>beta</b></nile-badge>`);
+      expect(el.getAttribute('aria-label')).to.equal('New beta');
+    });
+  });
 });

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

@@ -15,6 +15,7 @@ import { styles } from './nile-badge.css';
 import '../nile-icon-button/nile-icon-button';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
+import { HasSlotController } from '../internal/slot';
 import NileElement, { setupA11yMetadata } from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
 import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
@@ -35,27 +36,42 @@ import { A11yCustomValue } from '../internal/accessibility/a11y.custom-value.enu
  * @dependency nile-icon-button
  *
  * @slot - The badge's content.
- *
- * @event nile-remove - Emitted when the remove button is activated.
+ * @slot prefix - Content placed before the badge's content, such as an icon, dot or avatar.
+ * @slot suffix - Content placed after the badge's content, such as an icon, count or button.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix slot.
  * @csspart content - The badge's content.
- * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.
- * @csspart remove-button__base - The remove button's exported `base` part.
+ * @csspart suffix - The container that wraps the suffix slot.
  */
 
 @customElement('nile-badge')
 export class NileBadge extends NileElement {
   static styles: CSSResultGroup = styles;
 
+  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
+
   connectedCallback(): void {
     super.connectedCallback();
     setupA11yMetadata(this, {
       [Role.Role]: A11yRole.Text,
-      [A11yProperty.AriaLabel]: this.textContent?.trim() || A11yCustomValue.Badge,
+      [A11yProperty.AriaLabel]: this.getLabelText() || A11yCustomValue.Badge,
     });
   }
 
+  /** Text of the default slot only, so prefix and suffix content stays out of the label. */
+  private getLabelText(): string {
+    return [...this.childNodes]
+      .filter(
+        node =>
+          node.nodeType === Node.TEXT_NODE ||
+          (node.nodeType === Node.ELEMENT_NODE && !(node as Element).hasAttribute('slot'))
+      )
+      .map(node => node.textContent ?? '')
+      .join('')
+      .trim();
+  }
+
   /** The badge's theme variant. */
   @property({ reflect: true }) variant:
     | 'primary'
@@ -88,6 +104,9 @@ export class NileBadge extends NileElement {
   @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
 
   render() {
+    const hasPrefix = this.hasSlotController.test('prefix');
+    const hasSuffix = this.hasSlotController.test('suffix');
+
     return html`
       <span
         part="base"
@@ -117,9 +136,13 @@ export class NileBadge extends NileElement {
           'badge--sm': this.size === 'sm',
           'badge--md': this.size === 'md',
           'badge--lg': this.size === 'lg',
+          'badge--has-prefix': hasPrefix,
+          'badge--has-suffix': hasSuffix,
         })}
       >
+        <slot name="prefix" part="prefix" class="badge__prefix"></slot>
         <slot part="content" class="badge__content"></slot>
+        <slot name="suffix" part="suffix" class="badge__suffix"></slot>
       </span>
     `;
   }

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

@@ -104,4 +104,61 @@ describe('NileBreadcrumb', () => {
   it('98. slot is default (no name)', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item></nile-breadcrumb>`); const slot = el.shadowRoot!.querySelector('slot'); expect(slot!.hasAttribute('name')).to.be.false; });
   it('99. no nile-divider', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item></nile-breadcrumb>`); expect(el.shadowRoot!.querySelector('nile-divider')).to.be.null; });
   it('100. full integration', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb class="b" id="b1" role="navigation" aria-label="Breadcrumb"><nile-breadcrumb-item>Home</nile-breadcrumb-item><nile-breadcrumb-item>Settings</nile-breadcrumb-item><nile-breadcrumb-item>Profile</nile-breadcrumb-item></nile-breadcrumb>`); expect(el.id).to.equal('b1'); expect(el.getAttribute('role')).to.equal('navigation'); expect(el.querySelectorAll('nile-breadcrumb-item').length).to.equal(3); expect(el.textContent).to.contain('Home'); expect(el.textContent).to.contain('Profile'); });
+
+  describe('variant', () => {
+    const tpl = (variant?: string) => variant
+      ? html`<nile-breadcrumb variant=${variant}><nile-breadcrumb-item>A</nile-breadcrumb-item><nile-breadcrumb-item>B</nile-breadcrumb-item></nile-breadcrumb>`
+      : html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item><nile-breadcrumb-item>B</nile-breadcrumb-item></nile-breadcrumb>`;
+    const items = (el: NileBreadcrumb) => [...el.querySelectorAll('nile-breadcrumb-item')];
+
+    it('defaults to "default" and reflects', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      expect(el.variant).to.equal('default');
+      expect(el.getAttribute('variant')).to.equal('default');
+      items(el).forEach(i => expect(i.variant).to.equal('default'));
+    });
+
+    it('propagates "outlined" to every item', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      await Promise.all(items(el).map(i => i.updateComplete));
+      items(el).forEach(i => {
+        expect(i.getAttribute('variant')).to.equal('outlined');
+        expect(i.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item--outlined')).to.be.true;
+      });
+    });
+
+    it('keeps the existing text-colour classes when outlined', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      const [a, b] = items(el);
+      await a.updateComplete; await b.updateComplete;
+      expect(a.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item__slot-text')).to.be.true;
+      expect(b.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item__last-slot-text')).to.be.true;
+    });
+
+    it('updates items when variant changes at runtime', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      el.variant = 'outlined';
+      await el.updateComplete;
+      items(el).forEach(i => expect(i.variant).to.equal('outlined'));
+      el.variant = 'default';
+      await el.updateComplete;
+      items(el).forEach(i => expect(i.variant).to.equal('default'));
+    });
+
+    it('applies the variant to items added later', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      const added = document.createElement('nile-breadcrumb-item');
+      added.textContent = 'C';
+      el.appendChild(added);
+      await new Promise(r => setTimeout(r));
+      expect(added.variant).to.equal('outlined');
+    });
+
+    it('no chip class in the default variant', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      const [a] = items(el);
+      await a.updateComplete;
+      expect(a.shadowRoot!.querySelector('.nile-breadcrumb-item--outlined')).to.be.null;
+    });
+  });
 });

package/src/nile-breadcrumb/nile-breadcrumb.ts

@@ -31,6 +31,12 @@ export class NileBreadcrumb extends NileElement {
     return [styles];
   }
 
+  /**
+   * Visual style of the items. `outlined` renders each item inside an outlined chip;
+   * text colours are unchanged. Propagated to every slotted `nile-breadcrumb-item`.
+   */
+  @property({ type: String, reflect: true }) variant: 'default' | 'outlined' = 'default';
+
   /* #endregion */
 
   /* #region Methods */
@@ -46,7 +52,20 @@ export class NileBreadcrumb extends NileElement {
     });
   }
 
+  protected updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('variant')) {
+      this.syncItemVariant();
+    }
+  }
+
+  private syncItemVariant() {
+    this.querySelectorAll('nile-breadcrumb-item').forEach(item => {
+      item.variant = this.variant;
+    });
+  }
+
   private changeLastItem() {
+    this.syncItemVariant();
     const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
     const itemslength = items.length;
     for (let i = 0; i < itemslength - 1; i++) {

package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -46,6 +46,18 @@ export const styles = css`
   .nile-breadcrumb-item__last-slot-text {
     color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));
   }
+
+  .nile-breadcrumb-item--outlined {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .nile-breadcrumb-item--outlined.nile-breadcrumb-item__slot-text:hover,
+  .nile-breadcrumb-item--outlined.nile-breadcrumb-item__last-slot-text {
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+  }
 `;
 
 export default [styles];

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -44,6 +44,12 @@ export class NileBreadcrumbItem extends NileElement {
 
   @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';
 
+  /**
+   * Visual style of the item. `outlined` wraps the text in an outlined chip.
+   * Set automatically from the parent `nile-breadcrumb`'s `variant`.
+   */
+  @property({ type: String, reflect: true }) variant: 'default' | 'outlined' = 'default';
+
   private handleClick() {
     if (this.isLast) {
       return;
@@ -57,6 +63,7 @@ export class NileBreadcrumbItem extends NileElement {
         class=${classMap({
           'nile-breadcrumb-item__slot-text': !this.isLast,
           'nile-breadcrumb-item__last-slot-text': this.isLast,
+          'nile-breadcrumb-item--outlined': this.variant === 'outlined',
         })}
         @click=${this.handleClick}
         >