@nanoporetech-digital/components 8.23.11 → 8.24.1

package/dist/cjs/nano-tab-content.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-ap26V5bu.js');
+var renderer = require('./renderer-D1xFLJsH.js');
 
 const tabContentCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";
 

package/dist/cjs/nano-tab-group.cjs.entry.js

@@ -3,13 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var dom = require('./dom-Dxk5vXYq.js');
-var componentStore = require('./component-store-C5eBOK0w.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-ap26V5bu.js');
+var dom = require('./dom-GglTcT7o.js');
+var componentStore = require('./component-store-BsFgDzFM.js');
+var renderer = require('./renderer-D1xFLJsH.js');
 require('./throttle-CrRDOkln.js');
 
-const tabGroupCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-neutral-300);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-track-color:var(--nano-color-neutral-300);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";
+const tabGroupCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-border-default);--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-border-accent);--indicator-track-color:var(--nano-color-border-default);--indicator-size:0;--tab-spacing:var(--nano-spacing-md);--content-spacing:var(--nano-spacing-l1-default);display:block;position:relative;z-index:var(--nano-z-index-raised)}.group{display:flex;border-radius:0;inline-size:100%;flex:inherit}:host([equal-tab-size]) .group__tabs-border,.group__tabs[has-scroll-controls] .group__tabs-border{display:none}.group__tabs::part(items){gap:var(--tab-spacing)}.group--top{flex-direction:column}.group--top .group__tabs{--fade-size:100px}.group--top .group__tabs::part(items){align-items:flex-end}.group--top .group__tabs-border{flex:1;border-block-end:var(--border)}.group--top .group__body{order:2;position:relative;flex:1 1 auto;border-block-end:var(--border);padding-block:var(--content-spacing)}.group--start{flex-direction:row}:host([equal-tab-size]) .group--start .group__tabs::part(items){display:grid;grid-auto-rows:1fr}.group--start .group__tabs-border{flex:1;border-inline-end:var(--border)}.group--start .group__body{flex:1 1 auto;order:2;overflow:hidden;padding-inline-start:var(--content-spacing)}";
 
 let id = 0;
 const NanoTabGroup = class {

package/dist/cjs/nano-tab.cjs.entry.js

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var index = require('./index-ap26V5bu.js');
+var renderer = require('./renderer-D1xFLJsH.js');
 
-const tabCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{all:unset;padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab[href]:focus{outline:var(--nano-focus-ring);outline-offset:-3px}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";
+const tabCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border:2px solid var(--nano-color-border-default);--border-hover-color:var(--nano-color-border-accent-hover);--border-active-color:var(--nano-color-border-accent);--text-hover-color:var(--nano-color-text-hover);--text-active-color:var(--nano-color-text-primary);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-text-default);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-background-default);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{all:unset;padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab[href]:focus{outline:var(--nano-focus-ring);outline-offset:-3px}.tab.tab--disabled{opacity:0.5;cursor:not-allowed;border-color:var(--nano-color-border-disabled)}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-icon-default);--hover-color:var(--nano-color-icon-hover)}";
 
 let id = 0;
 const NanoTab = class {

package/dist/cjs/nano-table.cjs.entry.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-ap26V5bu.js');
 var throttle = require('./throttle-CrRDOkln.js');
-var renderer = require('./renderer-jVpDRMfV.js');
+var renderer = require('./renderer-D1xFLJsH.js');
 
 const tableCss = ".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 

package/dist/cjs/{renderer-jVpDRMfV.js → renderer-D1xFLJsH.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-ap26V5bu.js');
 
 /* eslint-disable @typescript-eslint/no-namespace */
 // css only components cannot be transformed because their static css relies on the tag name

package/dist/cjs/{scroll-C6pO9RvO.js → scroll-C2cNPPnK.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dom = require('./dom-Dxk5vXYq.js');
+var dom = require('./dom-GglTcT7o.js');
 
 /**
  * @returns the width of the document's scrollbar

package/dist/cjs/{slot-CfuOT0U4.js → slot-D0YPdT3s.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DGttnXif.js');
+var index = require('./index-ap26V5bu.js');
 
 /**
  * Given an element (which can either be within a shadowRoot or not) find it's innerText

package/dist/cjs/{tabbable-C-YwPfjA.js → tabbable-D60VZB1O.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-DGttnXif.js');
+require('./index-ap26V5bu.js');
 
 // Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable
 function isTabbable(el, skipVisible = false) {

package/dist/cjs/{table.worker-BXs-g6xI.js → table.worker-ClLnKNqW.js}

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var nanoDataTable_entry = require('./nano-data-table-BC1htsdm.js');
-require('./index-DGttnXif.js');
-require('./renderer-jVpDRMfV.js');
+var nanoDataTable_entry = require('./nano-data-table-B3KUstGL.js');
+require('./index-ap26V5bu.js');
+require('./renderer-D1xFLJsH.js');
 require('./math-DIjJ3V87.js');
 require('./throttle-CrRDOkln.js');
-require('./scroll-C6pO9RvO.js');
-require('./dom-Dxk5vXYq.js');
-require('./index-CkLcAUj-.js');
+require('./scroll-C2cNPPnK.js');
+require('./dom-GglTcT7o.js');
+require('./index-CeVPSufd.js');
 
 const workerName = 'table.worker';
 const workerMsgId = 'stencil.table.worker';

package/dist/collection/components/alert/alert.css

@@ -43,41 +43,41 @@
    * @prop --border-color: Defaults to var(--nano-layer-border-color);
    * @prop --border-width: Defaults to var(--nano-layer-border-width);
    * @prop --background: Defaults to var(--nano-layer-background-color);
-   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);
+   * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-fill-primary-hover);
    * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);
-   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);
-   * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);
+   * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-color-overlay-scrim);
+   * @prop --close-button-color: Defaults to var(--nano-color-fill-neutral-weak);
    */
   --border-radius: var(--nano-layer-border-radius);
   --border-color: var(--nano-layer-border-color);
   --border-width: var(--nano-layer-border-width);
   --icon-size: var(--nano-pictogram-size-large);
-  --scrim-color: var(--nano-overlay-background-color);
-  --close-button-color: var(--nano-color-neutral-800);
-  --tint-color: var(--nano-color-primary-1100);
-  --background: var(--nano-color-primary-50);
+  --scrim-color: var(--nano-color-overlay-scrim);
+  --close-button-color: var(--nano-color-fill-neutral);
+  --tint-color: var(--nano-color-text-info);
+  --background: var(--nano-color-surface-info);
   display: block;
   container-type: inline-size;
 }
 
 :host([color=neutral]), :host([theme=neutral]) {
-  --tint-color: var(--nano-color-neutral-1200);
-  --background: var(--nano-color-neutral-75);
+  --tint-color: var(--nano-color-text-neutral);
+  --background: var(--nano-color-surface-neutral);
 }
 
 :host([color=success]), :host([theme=success]) {
-  --tint-color: var(--nano-color-success-1100);
-  --background: var(--nano-color-success-50);
+  --tint-color: var(--nano-color-text-success);
+  --background: var(--nano-color-surface-success);
 }
 
 :host([color=warning]), :host([theme=warning]) {
-  --tint-color: var(--nano-color-warning-1100);
-  --background: var(--nano-color-warning-75);
+  --tint-color: var(--nano-color-text-warning);
+  --background: var(--nano-color-surface-warning);
 }
 
 :host([color=danger]), :host([theme=danger]) {
-  --tint-color: var(--nano-color-danger-1100);
-  --background: var(--nano-color-danger-100);
+  --tint-color: var(--nano-color-text-danger);
+  --background: var(--nano-color-surface-danger);
 }
 
 .alert {

package/dist/collection/components/badge/badge.js

@@ -9,8 +9,6 @@
 export class NanoBadge {
     /** The semantic theme of the button. Defaults to primary / brand blue  */
     theme;
-    /** The strength / vibrancy of the theme. Defaults to `3` */
-    strength;
     /** Use pulse to draw attention to the badge with an animation */
     pulse;
     static get is() { return "nano-badge"; }
@@ -51,25 +49,6 @@ export class NanoBadge {
                 "setter": false,
                 "reflect": true
             },
-            "strength": {
-                "type": "string",
-                "attribute": "strength",
-                "mutable": false,
-                "complexType": {
-                    "original": "'1' | '2' | '3' | '4'",
-                    "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The strength / vibrancy of the theme. Defaults to `3`"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true
-            },
             "pulse": {
                 "type": "boolean",
                 "attribute": "pulse",

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -37,20 +37,20 @@
       scroll-behavior: auto !important;
     }
   }/**
-  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1100).
-  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).
-  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).
-  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).
-  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).
-  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).
+  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-fill-primary-hover).
+  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-fill-primary-pressed).
+  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-text-default).
+  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-fill-neutral).
+  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-fill-neutral-weak).
+  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-background-default).
   */
 :host {
-  --text-color: var(--nano-color-primary-1100);
-  --text-color-hover: var(--nano-color-primary-1200);
-  --text-color-secondary: var(--nano-color-neutral-1400);
-  --text-color-disabled: var(--nano-color-neutral-1000);
-  --border-color: var(--nano-color-neutral-400);
-  --trigger-bg-color: var(--nano-color-base-0);
+  --text-color: var(--nano-color-text-link);
+  --text-color-hover: var(--nano-color-text-hover);
+  --text-color-secondary: var(--nano-color-text-default);
+  --text-color-disabled: var(--nano-color-text-disabled);
+  --border-color: var(--nano-color-border-default);
+  --trigger-bg-color: var(--nano-color-background-default);
   display: block;
 }
 

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
                     "references": {
                         "Breadcrumb": {
                             "location": "local",
-                            "path": "/builds/sN_eAsgS/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                            "path": "/builds/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                             "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
                         }
                     }

package/dist/collection/components/card-carousel/card-carousel.css

@@ -42,14 +42,14 @@
    * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. 
    * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;
    * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;
-   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);
-   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);
+   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-fill-neutral-weak);
+   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-fill-primary);
    */
   --bleed: 0px;
   --gap: var(--nano-spacing-xl);
-  --pagination-button-color: var(--nano-color-neutral-400);
-  --pagination-button-hover: var(--nano-color-primary-700);
-  --pagination-button-active: var(--nano-color-primary-1000);
+  --pagination-button-color: var(--nano-color-fill-neutral-weak);
+  --pagination-button-hover: var(--nano-color-border-accent-hover);
+  --pagination-button-active: var(--nano-color-fill-primary);
   --peek: calc(var(--bleed) / 2);
   --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));
   display: block;

package/dist/collection/components/checkbox/checkbox-group.css

@@ -39,17 +39,17 @@
   }/** Typography */
 :host {
   /**
-   * @prop --label-color: The color of the label text. Defaults to var(--nano-color-base-1000).
+   * @prop --label-color: The color of the label text. Defaults to var(--nano-color-surface-contrast).
    * @prop --label-font-size: The font size of the label text. Defaults to var(--nano-font-size-xs).
-   * @prop --invalid-msg-color: The color of the error message. Defaults to var(--nano-color-danger-1100).
-   * @prop --help-msg-color: The color of the help message. Defaults to var(--nano-color-base-1000).
+   * @prop --invalid-msg-color: The color of the error message. Defaults to var(--nano-color-fill-danger-hover).
+   * @prop --help-msg-color: The color of the help message. Defaults to var(--nano-color-surface-contrast).
    * @prop --more-font-size: The font size of the more information text (either help or error messaging). Defaults to var(--nano-font-size-2xs).
     * @prop --gap: The gap between checkboxes. Defaults to var(--nano-spacing-md).
    */
-  --label-color: var(--nano-color-base-1000);
+  --label-color: var(--nano-color-surface-contrast);
   --label-font-size: var(--nano-font-size-xs);
-  --invalid-msg-color: var(--nano-color-danger-1100);
-  --help-msg-color: var(--nano-color-base-1000);
+  --invalid-msg-color: var(--nano-color-fill-danger-hover);
+  --help-msg-color: var(--nano-color-surface-contrast);
   --more-font-size: var(--nano-font-size-2xs);
   --gap: var(--nano-spacing-md);
   display: block;

package/dist/collection/components/checkbox/checkbox.css

@@ -39,27 +39,27 @@
   }/** Typography */
 :host {
   /**
-   * @prop --border-color: Default control border color. Default var(--nano-color-primary-1000);
-   * @prop --label-color: Default label color. Default var(--nano-color-base-1000);
+   * @prop --border-color: Default control border color. Default var(--nano-color-fill-primary);
+   * @prop --label-color: Default label color. Default var(--nano-color-surface-contrast);
    * @prop --spacing: Spacing between label and control. Default var(--nano-spacing-sm);
-   * @prop --active-background: Control background when active. Default var(--nano-color-primary-1000);
+   * @prop --active-background: Control background when active. Default var(--nano-color-fill-primary);
    * @prop --active-foreground: Control foreground when active. Default var(--nano-color-basic-white);
-   * @prop --error-color: Error color. Default var(--nano-color-danger-1100);
-   * @prop --disabled-label-color: Label color when disabled. Default var(--nano-color-neutral-1000);
-   * @prop --disabled-background: Background color when disabled. Default var(--nano-color-neutral-300);
-   * @prop --disabled-foreground: Foreground color when disabled. Default var(--nano-color-neutral-700);
-   * @prop --disabled-border-color: Border color when disabled. Default var(--nano-color-neutral-1000);
+   * @prop --error-color: Error color. Default var(--nano-color-fill-danger-hover);
+   * @prop --disabled-label-color: Label color when disabled. Default var(--nano-color-fill-neutral);
+   * @prop --disabled-background: Background color when disabled. Default var(--nano-color-fill-neutral-weak);
+   * @prop --disabled-foreground: Foreground color when disabled. Default var(--nano-color-fill-neutral);
+   * @prop --disabled-border-color: Border color when disabled. Default var(--nano-color-fill-neutral);
    */
-  --border-color: var(--nano-color-primary-1000);
-  --label-color: var(--nano-color-base-1000);
+  --border-color: var(--nano-color-border-accent);
+  --label-color: var(--nano-color-text-default);
   --spacing: var(--nano-spacing-sm);
-  --active-background: var(--nano-color-primary-1000);
+  --active-background: var(--nano-color-fill-primary);
   --active-foreground: var(--nano-color-basic-white);
-  --error-color: var(--nano-color-danger-1100);
-  --disabled-label-color: var(--nano-color-neutral-1000);
-  --disabled-background: var(--nano-color-neutral-300);
-  --disabled-foreground: var(--nano-color-neutral-700);
-  --disabled-border-color: var(--nano-color-neutral-1000);
+  --error-color: var(--nano-color-fill-danger);
+  --disabled-label-color: var(--nano-color-text-disabled);
+  --disabled-background: var(--nano-color-fill-disabled);
+  --disabled-foreground: var(--nano-color-fill-neutral);
+  --disabled-border-color: var(--nano-color-border-disabled);
   display: inline-block;
   max-inline-size: 100%;
 }
@@ -260,13 +260,13 @@
   border: 1px solid var(--active-background);
 }
 :host(:first-of-type) .nanocb__segment .nanocb__label {
-  border-inline-end: 1px solid var(--nano-color-neutral-300);
+  border-inline-end: 1px solid var(--nano-color-fill-neutral-weak);
   border-start-start-radius: var(--nano-border-radius-pill);
   border-end-start-radius: var(--nano-border-radius-pill);
 }
 :host(:not(:last-of-type, :first-of-type)) .nanocb__segment .nanocb__label {
   border-inline-start: none;
-  border-inline-end: 1px solid var(--nano-color-neutral-300);
+  border-inline-end: 1px solid var(--nano-color-fill-neutral-weak);
 }
 :host(:last-of-type) .nanocb__segment .nanocb__label {
   border-inline-start: none;
@@ -306,16 +306,16 @@
   gap: 6px;
   padding: 8px;
   border: 1px solid var(--active-background);
-  color: var(--nano-color-primary-1100);
+  color: var(--nano-color-text-link);
   font-size: var(--nano-font-size-2xs);
   font-weight: bold;
   transition: background-color var(--nano-transition-x-fast) ease-out;
 }
 .nanocb__tag:hover {
-  background-color: var(--nano-color-primary-100);
+  background-color: var(--nano-color-fill-secondary-hover);
 }
 .nanocb__tag:has(input:checked) {
-  background-color: var(--nano-color-primary-300);
+  background-color: var(--nano-color-fill-secondary-pressed);
 }
 .nanocb__tag:has(input:focus-visible:focus) {
   outline: var(--nano-focus-ring);

package/dist/collection/components/collapsible-comparison/collapsible-comparison.css

@@ -38,14 +38,14 @@
     }
   }:host {
   /**
-  * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-base-0).
-  * @prop --color-border - Border color of the component. Defaults to var(--nano-color-neutral-200).
+  * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-background-default).
+  * @prop --color-border - Border color of the component. Defaults to var(--nano-color-surface-sunken).
   * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).
   */
 }
 :host .collapsible-comparison {
   background-color: var(--color-bg);
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
   padding: var(--outer-spacing) 0;
   container-type: inline-size;
 }
@@ -68,7 +68,7 @@
     display: none;
   }
   :host nano-icon-button {
-    --color: var(--nano-color-primary-1100);
+    --color: var(--nano-color-icon-primary);
     display: block;
     margin-inline-start: auto;
     font-size: var(--nano-font-size-xl);

package/dist/collection/components/content-links/content-links.css

@@ -37,10 +37,10 @@
       scroll-behavior: auto !important;
     }
   }/**
-* @prop --text-color: The primary text and chevron colour. defaults to var(--nano-color-neutral-1400)
-* @prop --color-disabled: The disabled text and chevron colour. defaults to var(--nano-color-neutral-800)
-* @prop --color-border: The border colour. defaults to var(--nano-color-neutral-200)
-* @prop --color-active: The active text and chevron colour. defaults to var(--nano-color-primary-1000)
+* @prop --text-color: The primary text and chevron colour. defaults to var(--nano-color-text-default)
+* @prop --color-disabled: The disabled text and chevron colour. defaults to var(--nano-color-fill-neutral)
+* @prop --color-border: The border colour. defaults to var(--nano-color-surface-sunken)
+* @prop --color-active: The active text and chevron colour. defaults to var(--nano-color-fill-primary)
 * @prop --padding: The padding around the content link. defaults to var(--nano-spacing-sm)
 * @prop --icon-size: The size of the chevron icon. defaults to 1em
 */

package/dist/collection/components/cta/cta.js

@@ -48,13 +48,17 @@ export class NanoCta {
     static get properties() {
         return {
             "theme": {
-                "type": "string",
+                "type": "unknown",
                 "attribute": "theme",
                 "mutable": false,
                 "complexType": {
-                    "original": "Color",
-                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "original": "Omit<'success' | 'warning', Color>",
+                    "resolved": "{ readonly [x: number]: string; [Symbol.iterator]: () => IterableIterator<string>; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; link: (url: string) => string; small: () => string; sub: () => string; sup: () => string; big: () => string; blink: () => string; strike: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; (that: string, locales?: LocalesArgument, options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: { (locales?: string | string[]): string; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string | string[]): string; (locales?: LocalesArgument): string; }; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpExecArray>; replaceAll: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; }; at: (index: number) => string; toString: () => string; valueOf: () => string; }",
                     "references": {
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
                         "Color": {
                             "location": "import",
                             "path": "../../types/shared",
@@ -69,8 +73,7 @@ export class NanoCta {
                     "text": "The semantic theme of the button. Defaults to primary / brand blue"
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": true
+                "setter": false
             },
             "secondary": {
                 "type": "boolean",

package/dist/collection/components/data-table/table.css

@@ -39,25 +39,25 @@
   }.nano-data-table {
   /**
    * @prop --table-padding. The padding of the table cells. Defaults to `var(--table-compact-padding)`
-   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`
-   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`
-   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`
+   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-surface-sunken)`
+   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-fill-primary)`
+   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-background-default)`
    * @prop --table-max-col-width. The maximum width of the table columns. Defaults to `clamp(200px, 500px, 50vw)`
-   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`
+   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-surface-neutral)`
    * @prop --table-wrapper-max-height: maximum height of the table when table is scrollable. Defaults to 80vh;
    * @prop --table-wrapper-max-width: maximum width of the table when table is scrollable. Defaults to 100%;
    */
   --table-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));
-  --table-border-color: var(--nano-color-neutral-200);
-  --table-border-color-header: var(--nano-color-primary-1000);
-  --table-background: var(--nano-color-base-0);
+  --table-border-color: var(--nano-color-border-default);
+  --table-border-color-header: var(--nano-color-border-default);
+  --table-background: var(--nano-color-background-default);
   --table-max-col-width: clamp(200px, 500px, 50vw);
-  --table-ordered-bg: var(--nano-color-neutral-100);
+  --table-ordered-bg: var(--nano-color-surface-subtle);
   --table-wrapper-max-height: 80vh;
   --table-wrapper-max-width: 100%;
   display: block;
   inline-size: 100%;
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
   container-type: inline-size;
   --isLtR: 1;
 }
@@ -65,7 +65,7 @@
   --isLtR: -1;
 }
 .nano-data-table .nano-sortable__dragged {
-  background: var(--nano-color-base-0);
+  background: var(--nano-color-background-default);
   opacity: 0.9;
   box-shadow: var(--nano-shadow-l0);
   z-index: 10 !important;
@@ -113,7 +113,7 @@
 }
 .nano-tbl__ordered {
   background-color: var(--table-ordered-bg);
-  --table-border-color: var(--nano-color-neutral-300);
+  --table-border-color: var(--nano-color-border-default-strong);
 }
 .nano-tbl__order-btn {
   padding: 0;
@@ -171,7 +171,7 @@ thead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-s
 }
 .nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {
   background-color: var(--table-ordered-bg) !important;
-  --table-border-color: var(--nano-color-neutral-300);
+  --table-border-color: var(--nano-color-border-default-strong);
 }
 .nano-tbl__cell-content {
   overflow: hidden;

package/dist/collection/components/datalist/datalist.css

@@ -43,14 +43,14 @@
   * @prop --padding-start: for all nested `nano-option` elements. Defaults to calc(var(--nano-spacing-sm) * 3); 
   * @prop --padding-end: for all nested `nano-option` elements. Defaults to var(--nano-spacing-sm) 
   * @prop --font-size: for all nested `nano-option` elements. Defaults to var(--nano-font-size-2xs) 
-  * @prop --color: default text color of content other than `nano-option`. Defaults to var(--nano-color-neutral-1000)
+  * @prop --color: default text color of content other than `nano-option`. Defaults to var(--nano-color-fill-neutral)
   */
   --padding-top: 8px;
   --padding-bottom: 8px;
   --padding-start: var(--nano-spacing-l);
   --padding-end: var(--nano-spacing-l);
   --font-size: var(--nano-font-size-2xs);
-  --color: var(--nano-color-neutral-1000);
+  --color: var(--nano-color-text-default);
   color: var(--color);
 }
 

package/dist/collection/components/date-picker/date-picker.css

@@ -38,16 +38,16 @@
     }
   }:host {
   /**
-   * @prop --active-color: defaults to var(--nano-color-primary-1000);
-   * @prop --active-text-color: defaults to var(--nano-color-base-0);
-   * @prop --inactive-color: defaults to var(--nano-color-neutral-300);
+   * @prop --active-color: defaults to var(--nano-color-fill-primary);
+   * @prop --active-text-color: defaults to var(--nano-color-background-default);
+   * @prop --inactive-color: defaults to var(--nano-color-fill-neutral-weak);
    */
-  --active-color: var(--nano-color-primary-1000);
-  --active-text-color: var(--nano-color-base-0);
-  --inactive-color: var(--nano-color-neutral-300);
+  --active-color: var(--nano-color-fill-primary);
+  --active-text-color: var(--nano-color-basic-white);
+  --inactive-color: var(--nano-color-fill-neutral-weak);
   display: block;
   font-size: 16px;
-  background: var(--nano-color-neutral-50);
+  background: var(--nano-color-surface-subtle);
 }
 
 .duet-date *,