@aquera/nile-elements 2.0.8 → 2.0.10

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.2";}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.3";}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.2';\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.3';\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.2"}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.3"}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.8",
+  "version": "2.0.10",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -144,7 +144,7 @@ export const styles = css`
     color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
+    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-300));
     background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
   }
 
@@ -193,7 +193,7 @@ export const styles = css`
   }
 
   .badge--gray.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-300));
   }
 
 

package/src/nile-button-toggle/nile-button-toggle.css.ts

@@ -74,12 +74,12 @@ export const styles = css`
 
   .nile-button-toggle__active {
     background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
-    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
   }
 
   .nile-button-toggle__active:hover {
     background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
   }
 
   .nile-button-toggle__disabled {

package/src/nile-code-editor/nile-code-editor.ts

@@ -672,9 +672,9 @@ export class NileCodeEditor extends NileElement {
     return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 128;
   }
 
-  /** Applied in dark only so light is untouched.*/
+  /** One Dark in dark mode; light keeps CodeMirror's own active-line highlight. */
   getDarkThemeExtension(): Extension {
-    return this.isDarkTheme() ? [oneDarkTheme, highlightActiveLine()] : [];
+    return [highlightActiveLine(), ...(this.isDarkTheme() ? [oneDarkTheme] : [])];
   }
 
   getDefaultSyntaxHighlightingExtension(){

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

@@ -94,7 +94,7 @@ export const styles = css`
   }
 
   :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -12,6 +12,7 @@ export const styles = css`
     position: relative;
     display: block;
     font-family: inherit;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
 
@@ -41,6 +42,7 @@ export const styles = css`
     width: 100%;
     padding: 12px;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border-radius: 0 0 8px 8px;
     outline: none;
     tab-size: 4;
@@ -81,6 +83,7 @@ nile-rte-preview {
   background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   box-sizing: border-box;
   word-wrap: break-word;
+  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
 }
 
   nile-rich-text-editor[disabled] nile-rte-preview {
@@ -246,7 +249,7 @@ nile-rte-preview figure.rte-image img {
 nile-rte-preview figure.rte-image figcaption {
   margin-top: 6px;
   font-size: 0.875em;
-  color: var(--nile-colors-neutral-600, var(--ng-colors-text-secondary));
+  color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
 }
 
 .editor figure.rte-image {
@@ -273,7 +276,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
 
 .editor.empty::before {
   content: attr(data-placeholder);
-  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
   position: absolute;
   font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   pointer-events: none;

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

@@ -195,7 +195,7 @@ export const styles = css`
     display: flex;
     flex: 1;
     align-items: center;
-    flex-wrap: no-wrap;
+    flex-wrap: nowrap;
     margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
@@ -216,6 +216,98 @@ export const styles = css`
     margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
+  button.select__tags-count {
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    text-align: inherit;
+  }
+
+  button.select__tags-count:disabled {
+    cursor: not-allowed;
+  }
+
+  .select__tags--fitted {
+    min-width: 0;
+  }
+
+  .select__tags nile-lite-tooltip.select__tag-tip {
+    display: contents;
+  }
+
+  .select__tags nile-tag {
+    flex: 0 1 auto;
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  /* A chip is capped - and so truncated - only when a tooltip can reveal the
+     full value. Without one it keeps its natural width and the fit pass moves
+     the surplus into the +N button instead. */
+  :host([showtooltip]) .select__tags nile-tag {
+    max-width: var(--nile-width-180px, var(--ng-height-180px));
+  }
+
+  /* Only the fitted layout can move a chip into the +N button, so only there
+     can a chip refuse to shrink. */
+  :host(:not([showtooltip])) .select__tags--fitted nile-tag {
+    flex-shrink: 0;
+  }
+
+  .select__tags nile-tag::part(base) {
+    max-width: 100%;
+  }
+
+  .select__tags nile-tag::part(prefix_content_wrapper) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .select__tags nile-tag::part(content) {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    /* The tag's line-height of 1 leaves the clip box shorter than the glyph
+       box, so descenders are cut. Pad the clip box, negate it in layout. */
+    padding-block: 3px;
+    margin-block: -3px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
+    text-overflow: ellipsis;
+  }
+
+  .select__tags nile-tag::part(remove-button) {
+    flex: 0 0 auto;
+  }
+
+  .select__tags--fitted nile-tag:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));
+    height: var(--nile-height-26px, var(--ng-height-26px));
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px dashed
+      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+  }
+
   .select__tags::slotted(nile-tag) {
     cursor: pointer !important;
   }
@@ -443,6 +535,8 @@ export const styles = css`
     bottom: 0;
     z-index: 1;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    container-type: inline-size;
+    container-name: nile-select-footer;
   }
 
   .select__custom-footer {
@@ -469,10 +563,40 @@ export const styles = css`
     flex-direction: row;
     align-items: center;
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    gap: var(--nile-spacing-none, var(--ng-spacing-none));
     justify-content: space-between;
   }
 
+  .select__footer-action,
+  .select__footer .select__clear {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    min-width: 0;
+  }
+
+  .select__footer-glyph {
+    flex: 0 0 auto;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .select__footer-label {
+    white-space: nowrap;
+  }
+
+  @container nile-select-footer (max-width: 178px) {
+    .select__clear .select__footer-label {
+      display: none;
+    }
+  }
+
+  @container nile-select-footer (max-width: 137px) {
+    .select__footer-label {
+      display: none;
+    }
+  }
+
   :host([legacy]) .select__footer {
     background: var(--nile-colors-neutral-100);
     border-top: 1px solid var(--nile-colors-neutral-400);
@@ -516,10 +640,6 @@ export const styles = css`
     }
   }
 
-  .select__invisible {
-    opacity: 0;
-  }
-
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }