@nanoporetech-digital/components 8.23.11 → 8.24.1

package/dist/collection/components/range/range.css

@@ -38,27 +38,27 @@
     }
   }:host {
   /**
-   * @prop --inactive-color: Defaults to var(--nano-color-neutral-800);
-   * @prop --knob-color: Defaults to var(--nano-color-primary-1200);
-   * @prop --knob-active-color: Defaults to var(--nano-color-primary-1400);
+   * @prop --inactive-color: Defaults to var(--nano-color-fill-neutral);
+   * @prop --knob-color: Defaults to var(--nano-color-fill-primary-pressed);
+   * @prop --knob-active-color: Defaults to var(--nano-color-surface-heavy-feature-pressed);
    * @prop --knob-width: Defaults to 1.75rem;
    * @prop --knob-height: Defaults to 1.25rem;
    * @prop --bar-height: Defaults to .5em;
-   * @prop --bar-background: Defaults to var(--nano-color-neutral-300);
-   * @prop --bar-background-active: Defaults to var(--nano-color-primary-1000);
-   * @prop --tooltip-background: Defaults to var(--nano-color-base-0);
-   * @prop --tooltip-color: Defaults to var(--nano-color-neutral-1400);
+   * @prop --bar-background: Defaults to var(--nano-color-fill-neutral-weak);
+   * @prop --bar-background-active: Defaults to var(--nano-color-fill-primary);
+   * @prop --tooltip-background: Defaults to var(--nano-color-background-default);
+   * @prop --tooltip-color: Defaults to var(--nano-color-text-default);
    */
-  --inactive-color: var(--nano-color-neutral-800);
-  --knob-color: var(--nano-color-primary-1200);
-  --knob-active-color: var(--nano-color-primary-1400);
+  --inactive-color: var(--nano-color-fill-neutral-weak);
+  --knob-color: var(--nano-color-fill-primary-pressed);
+  --knob-active-color: var(--nano-color-surface-heavy-feature-pressed);
   --knob-width: 1.75rem;
   --knob-height: 1.25rem;
   --bar-height: .5em;
-  --bar-background: var(--nano-color-neutral-300);
-  --bar-background-active: var(--nano-color-primary-1000);
-  --tooltip-background: var(--nano-color-base-0);
-  --tooltip-color: var(--nano-color-neutral-1400);
+  --bar-background: var(--nano-color-fill-neutral-weak);
+  --bar-background-active: var(--nano-color-fill-primary);
+  --tooltip-background: var(--nano-color-background-default);
+  --tooltip-color: var(--nano-color-text-default);
 }
 
 .range-wrap {
@@ -102,7 +102,7 @@
   overflow: clip;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--nano-color-base-1000);
+  color: var(--nano-color-surface-contrast);
   font-size: var(--nano-font-size-xs);
   padding-block-end: var(--nano-spacing-sm);
   line-height: 1;

package/dist/collection/components/rating/rating.css

@@ -38,14 +38,14 @@
     }
   }:host {
   /**
-  * @prop --symbol-color: The default color for symbols. Defaults to `var(--nano-color-neutral-400)`
-  * @prop --symbol-color-active: The active color for symbols. Defaults to `var(--nano-color-primary-1200)`
+  * @prop --symbol-color: The default color for symbols. Defaults to `var(--nano-color-fill-neutral-weak)`
+  * @prop --symbol-color-active: The active color for symbols. Defaults to `var(--nano-color-fill-primary-pressed)`
   * @prop --symbol-size: The size of the symbols. Defaults to 1.5rem
   * @prop --symbol-spacing: The spacing between symbols. Defaults to 0
   * @prop --symbol-size: The size of the symbols. Defaults to 1.3125rem (21px)
   */
-  --symbol-color: var(--nano-color-neutral-400);
-  --symbol-color-active: var(--nano-color-primary-1200);
+  --symbol-color: var(--nano-color-fill-neutral-weak);
+  --symbol-color-active: var(--nano-color-fill-primary);
   --symbol-spacing: 0.25rem;
   --symbol-size: 1.3125rem;
   display: inline-block;
@@ -62,7 +62,7 @@
   overflow: clip;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--nano-color-base-1000);
+  color: var(--nano-color-surface-contrast);
   font-size: var(--nano-font-size-xs);
   padding-block-end: var(--nano-spacing-sm);
   line-height: 1;

package/dist/collection/components/select/select.css

@@ -379,60 +379,60 @@ label.visually-hide,
 
 :host {
   /**
-    * @prop --placeholder-color: Color of placeholder. Defaults to var(--nano-color-neutral-1000).
+    * @prop --placeholder-color: Color of placeholder. Defaults to var(--nano-color-fill-neutral).
 
     * @prop --padding-top: Used for most nested element's top vertical spacing. Defaults to var(--nano-spacing-sm).
     * @prop --padding-end: Used for most nested element's right horizontal spacing. Defaults to var(--nano-spacing-sm).
     * @prop --padding-bottom: Used for most nested element's bottom vertical spacing. Defaults to var(--nano-spacing-sm).
     * @prop --padding-start: Used for most nested element's left horizontal spacing. Defaults to var(--nano-spacing-sm).
 
-    * @prop --color-invalid: Color of invalid messaging. Defaults to var(--nano-color-danger-1100).
-    * @prop --color-valid: Color of valid messaging. Defaults to var(--nano-color-success-1000).
+    * @prop --color-invalid: Color of invalid messaging. Defaults to var(--nano-color-fill-danger-hover).
+    * @prop --color-valid: Color of valid messaging. Defaults to var(--nano-color-fill-success).
 
     * @prop --input-font-size: Font size of input. Defaults to var(--nano-font-size-sm).
-    * @prop --input-text-color: Text color of input. Defaults to var(--nano-color-base-1000).
+    * @prop --input-text-color: Text color of input. Defaults to var(--nano-color-surface-contrast).
     * @prop --input-border-width: Border width of input. Defaults to 1px.
-    * @prop --input-border-color: Border color of input. Defaults to var(--nano-color-neutral-300).
+    * @prop --input-border-color: Border color of input. Defaults to var(--nano-color-fill-neutral-weak).
     * @prop --input-border-radius: Border radius of input. Defaults to 0px.
     * @prop --input-invalid-border-hint-width: Border-start width used as an invalid hint. Defaults to 2px.
     * @prop --input-border-style: Border style of input. Defaults to solid var(--input-border-color).
-    * @prop --input-border-style--focus: Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700).
-    * @prop --input-bg-color: Background color of input. Defaults to var(--nano-color-base-0).
+    * @prop --input-border-style--focus: Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-border-accent-hover).
+    * @prop --input-bg-color: Background color of input. Defaults to var(--nano-color-background-default).
 
     * @prop --invalid-msg-color: Color of invalid message. Defaults to var(--color-invalid).
-    * @prop --help-msg-color: Color of help message. Defaults to var(--nano-color-base-1000).
+    * @prop --help-msg-color: Color of help message. Defaults to var(--nano-color-surface-contrast).
     * @prop --more-font-size: Font size of helper & error messaging. Defaults to var(--nano-font-size-2xs).
 
     * @prop --clear-btn-color: Color of clear button. Defaults to rgb(var(--nano-color-base-rgb-1000) / 60%).
     * @prop --clear-btn-color--hover: Color of clear button on hover. Defaults to rgb(var(--nano-color-base-rgb-1000) / 100%).
     * @prop --clear-btn-color--invalid: Color of clear button when invalid. Defaults to rgb(var(--color-invalid) / 100%).
 
-    * @prop --label-color: Color of label. Defaults to var(--nano-color-base-1000).
+    * @prop --label-color: Color of label. Defaults to var(--nano-color-surface-contrast).
     * @prop --label-font-size: Font size of label. Defaults to var(--nano-font-size-xs).
     */
-  --placeholder-color: var(--nano-color-neutral-1000);
+  --placeholder-color: var(--nano-color-text-placeholder);
   --padding-top: var(--nano-spacing-sm);
   --padding-end: var(--nano-spacing-sm);
   --padding-bottom: var(--nano-spacing-sm);
   --padding-start: var(--nano-spacing-sm);
-  --color-invalid: var(--nano-color-danger-1100);
-  --color-valid: var(--nano-color-success-1000);
+  --color-invalid: var(--nano-color-text-danger);
+  --color-valid: var(--nano-color-fill-success);
   --input-font-size: var(--nano-font-size-sm);
-  --input-text-color: var(--nano-color-base-1000);
+  --input-text-color: var(--nano-color-text-default);
   --input-border-width: 1px;
-  --input-border-color: var(--nano-color-neutral-300);
+  --input-border-color: var(--nano-color-border-default);
   --input-border-radius: 0px;
   --input-invalid-border-hint-width: 2px;
   --input-border-style: solid var(--input-border-color);
-  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);
-  --input-bg-color: var(--nano-color-base-0);
+  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-border-active);
+  --input-bg-color: var(--nano-color-background-default);
   --invalid-msg-color: var(--color-invalid);
-  --help-msg-color: var(--nano-color-base-1000);
+  --help-msg-color: var(--nano-color-text-default);
   --more-font-size: var(--nano-font-size-2xs);
   --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);
   --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);
   --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);
-  --label-color: var(--nano-color-base-1000);
+  --label-color: var(--nano-color-text-default);
   --label-font-size: var(--nano-font-size-xs);
   /**
    * @prop --max-menu-height: the maximum of the dropdown menu. Defaults to 50vw.
@@ -569,7 +569,7 @@ select {
 }
 
 .select__down-arrow {
-  color: var(--nano-color-primary-1200);
+  color: var(--nano-color-icon-primary);
   transition: rotate var(--nano-transition-x-fast) linear;
 }
 .is-open .select__down-arrow {
@@ -623,7 +623,7 @@ select {
 }
 
 nano-tag {
-  --color-non-interactive: var(--nano-color-primary-1000);
+  --color-non-interactive: var(--nano-color-fill-primary);
   margin-block: var(--padding-bottom) 0;
   margin-inline: var(--padding-start) 0;
   line-height: 1.4;

package/dist/collection/components/slides/slides.css

@@ -38,26 +38,26 @@
     }
   }:host {
   /**
-  * @prop --dot-color: inactive colour of pager bullets. Defaults to var(--nano-color-neutral-400);
-  * @prop --dot-color-active: active colour of pager bullets. Defaults to var(--nano-color-primary-1000);
+  * @prop --dot-color: inactive colour of pager bullets. Defaults to var(--nano-color-fill-neutral-weak);
+  * @prop --dot-color-active: active colour of pager bullets. Defaults to var(--nano-color-fill-primary);
   *
   * @prop --navbtns-width: next / prev button width. Default 1.875rem;
   * @prop --navbtns-height: next / prev button height. Default 2.75rem;
   * @prop --navbtns-icon-color: next / prev icon color. Default var(--dot-color-active);
-  * @prop --navbtns-icon-color-hover: next / prev icon color on hover. Default var(--nano-color-primary-1000);
-  * @prop --navbtns-bg-color: next / prev bg color. Defaults to var(--nano-color-base-0);
+  * @prop --navbtns-icon-color-hover: next / prev icon color on hover. Default var(--nano-color-fill-primary);
+  * @prop --navbtns-bg-color: next / prev bg color. Defaults to var(--nano-color-background-default);
   * @prop --navbtns-icon-color-disabled: next / prev icon color. Default var(--dot-color-active);
-  * @prop --navbtns-bg-color-disabled: next / prev bg color. Default var(--nano-color-base-0);
+  * @prop --navbtns-bg-color-disabled: next / prev bg color. Default var(--nano-color-background-default);
   *
   * @prop --fsbtn-icon-color: fullscreen btn icon color. Default var(--dot-color-active);
-  * @prop --fsbtn-bg-color: fullscreen bg color. Default var(--nano-color-base-0);
+  * @prop --fsbtn-bg-color: fullscreen bg color. Default var(--nano-color-background-default);
   */
-  --dot-color: var(--nano-color-neutral-400);
-  --dot-color-active: var(--nano-color-primary-1000);
-  --navbtns-icon-color: var(--nano-color-neutral-700);
-  --navbtns-icon-color-hover: var(--nano-color-primary-1000);
+  --dot-color: var(--nano-color-fill-neutral-weak);
+  --dot-color-active: var(--nano-color-fill-primary);
+  --navbtns-icon-color: var(--nano-color-icon-default);
+  --navbtns-icon-color-hover: var(--nano-color-icon-hover);
   --navbtns-bg-color: transparent;
-  --navbtns-icon-color-disabled: var(--dot-color-active);
+  --navbtns-icon-color-disabled: var(--nano-color-icon-disabled);
   --navbtns-bg-color-disabled: transparent;
   --navbtns-width: 1.5rem;
   --navbtns-height: 1rem;

package/dist/collection/components/slides/slides.js

@@ -47,6 +47,7 @@ export class Slides {
     slidesReady;
     didInit = false;
     slideCount = 0;
+    pageCount = 0;
     host;
     /**
      * Options to pass to the flickity instance.
@@ -188,6 +189,16 @@ export class Slides {
         flickity.reloadCells();
         flickity.resize();
         flickity.reposition();
+        this.updatePageCount();
+    }
+    /**
+     * Sync the pager dot count with the number of flickity page groups.
+     * When `groupCells` is enabled, flickity groups several cells into a single
+     * page, so the dot count must reflect `flickity.slides` rather than the raw
+     * number of child slides.
+     */
+    updatePageCount() {
+        this.pageCount = this.syncflickity?.slides.length ?? this.slideCount;
     }
     /**
      * Transition to the specified slide.
@@ -392,6 +403,7 @@ export class Slides {
             this.readyflickity(flick);
             this.ready = true;
             this.isReloading = false;
+            this.updatePageCount();
             if (!window['ResizeObserver'])
                 return;
             if (this.resizeO) {
@@ -406,6 +418,7 @@ export class Slides {
                         if (vp)
                             vp.style.height = '';
                         flick.resize();
+                        this.updatePageCount();
                     });
                 });
             }));
@@ -494,15 +507,15 @@ export class Slides {
         this.destroyflickity();
     }
     render() {
-        return (h(Host, { key: 'b6f08fc2b892fa03e5e5d1c6faa8c9ed5c96909f', class: "nano-slides" }, h("div", { key: '31703829da5889f44e9918c813b71a9c12955881', class: {
+        return (h(Host, { key: '51c5bac1a4200ebf02c679237e39b6f62f37424e', class: "nano-slides" }, h("div", { key: '94633663fd3ad69b4c1bc98c4749c048f57617cf', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, h("div", { key: '9f85e49dc9fc7e78fd73aabf81f21bcb4f7c9a29', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, h("div", { key: '056922cbc6ff858bc237a9ec45ebbb281f4b4002', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, h("slot", { key: 'df99653f152b14f4e06e2451a93e7517c82027d9', onSlotchange: () => this.update() })), h("div", { key: '0f34a9196a369cadc93a7a678f318f036a4f8bc2', class: "ui-extras" }, h("slot", { key: '6fee3e51010cbdd25ad74b59e86133a30501fe13', name: "ui" })), this.slideCount > 1 && (this.pager || this.navbtns) && (h("div", { key: '54c54f41d109ea9ee44cad50dd8929046b8fabf0', class: "pagination", part: "pagination" }, this.navbtns && (h("button", { key: '6c06cd8854f495dd8df48b94c98eb5cfa5767947', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, h("span", { key: 'a7a80501503e055217b546ef618f9665eee79ebc', class: "button-icon button-icon--previous", part: "navigation-icon" }, h("slot", { key: 'd43695afeecb25ba5ba5b0dc674ee4123b35540f', name: "previous-icon" })))), this.pager && (h("div", { key: '5e975ec703c51f361f654afac6bc03a7e4d03892', class: "flickity-page-dots" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
+            }, part: "slide-container" }, h("slot", { key: '064767dbec8679ae75f783629737454832821ad4', onSlotchange: () => this.update() })), h("div", { key: '2628c6d3411307f5f42a04986e77839cc9f4a5cd', class: "ui-extras" }, h("slot", { key: '7d1df51cbe0f20db37e266779ea7e63b4b136070', name: "ui" })), this.pageCount > 1 && (this.pager || this.navbtns) && (h("div", { key: '96023f86df7c1cfb7250f9b348a71f7f5b66b7f8', class: "pagination", part: "pagination" }, this.navbtns && (h("button", { key: 'bcf85a09b3210ba78ff19592b991fe3873ce2b75', class: "flickity-button flickity-prev-next-button previous", part: "navigation-button navigation-button--previous", "aria-label": "Previous slide", onClick: () => this.slidePrev(), disabled: this.iCurrentSlide === 0 && !this.options.wrapAround }, h("span", { key: 'c4d0bcf5fb2b963dd36481dbbd2e229d44ac02e4', class: "button-icon button-icon--previous", part: "navigation-icon" }, h("slot", { key: '004f8f5b4513e55240d9703e641c5e59184c3af1', name: "previous-icon" })))), this.pager && (h("div", { key: 'd8ae45a8b450e5870a566cf986460a649a887df9', class: "flickity-page-dots" }, Array.from({ length: this.pageCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
                 'pagination-btn': true,
                 'pagination-btn--active': this.isActive(index),
                 'is-selected': this.isActive(index),
@@ -511,8 +524,8 @@ export class Slides {
                 if (this.isActive(index))
                     return;
                 this.slideTo(index);
-            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (h("button", { key: '7670270c71a6eb61e9a1de33f4a4214ed4a035f9', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
-                this.iCurrentSlide + 1 && !this.options.wrapAround }, h("span", { key: '7140891f079fc702044e6bd46aaaf996dbac02d7', class: "button-icon", part: "navigation-icon" }, h("slot", { key: 'ceed5fb13ebf410b999f7b4a10a0489b2162d4ed', name: "next-icon" })))))))));
+            } }, h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1)))))), this.navbtns && (h("button", { key: '65592f3e81fadad36aa20be8738b9fd94d4d9ca5', class: "flickity-button flickity-prev-next-button next", part: "navigation-button navigation-button--next", "aria-label": "Next slide", onClick: () => this.slideNext(), disabled: this.syncflickity?.slides.length ===
+                this.iCurrentSlide + 1 && !this.options.wrapAround }, h("span", { key: '0a0cca0e3e66648009861c3dd2474a0882c3c5bb', class: "button-icon", part: "navigation-icon" }, h("slot", { key: '2b709b10a39ca707ec622983e83e4ba79e9989ee', name: "next-icon" })))))))));
     }
     static get is() { return "nano-slides"; }
     static get encapsulation() { return "shadow"; }
@@ -729,7 +742,8 @@ export class Slides {
             "iCurrentSlide": {},
             "slidesReady": {},
             "didInit": {},
-            "slideCount": {}
+            "slideCount": {},
+            "pageCount": {}
         };
     }
     static get events() {

package/dist/collection/components/spinner/spinner.css

@@ -39,14 +39,14 @@
   }:where(nano-spinner, .nano-spinner) {
   /**
    * @prop --track-size: Size of the spinner track. Defaults to .1em.
-   * @prop --indicator-color: Color of the spinner indicator. Defaults to var(--nano-color-primary-1000).
-   * @prop --track-color: Color of the spinner track. Defaults to var(--nano-color-neutral-300).
+   * @prop --indicator-color: Color of the spinner indicator. Defaults to var(--nano-color-fill-primary).
+   * @prop --track-color: Color of the spinner track. Defaults to var(--nano-color-fill-neutral-weak).
    * @prop --overlay-color: Color of the overlay when the spinner has the `overlay` attribute. Defaults to rgb(var(--nano-color-base-rgb-0) / 88%).
    */
   display: inline-block;
   --track-size: .1em;
-  --indicator-color: var(--nano-color-primary-1000);
-  --track-color: var(--nano-color-neutral-300);
+  --indicator-color: var(--nano-color-fill-primary);
+  --track-color: var(--nano-color-fill-neutral-weak);
   --overlay-color: rgb(var(--nano-color-base-rgb-0) / 88%);
   display: inline-flex;
   flex-direction: column;
@@ -73,7 +73,7 @@
 }
 :where(nano-spinner, .nano-spinner) [slot=label] {
   font-size: var(--nano-font-size-sm);
-  color: var(--nano-color-neutral-1200);
+  color: var(--nano-color-fill-neutral);
   display: block;
   text-align: center;
   position: relative;

package/dist/collection/components/split-pane/split-pane.css

@@ -42,15 +42,15 @@
   * @prop --divider-hit-area: The width of the hit area for the divider. Default 14px.
   * @prop --min: The minimum size of the split pane. Default 0%.
   * @prop --max: The maximum size of the split pane. Default 100%.
-  * @prop --background-color: The background color of the divider. Default var(--nano-color-neutral-300).
-  * @prop --content-color: The text color of the divider. Default var(--nano-color-neutral-1000).
+  * @prop --background-color: The background color of the divider. Default var(--nano-color-fill-neutral-weak).
+  * @prop --content-color: The text color of the divider. Default var(--nano-color-fill-neutral).
   */
   --divider-width: 4px;
   --divider-hit-area: 14px;
   --min: 0%;
   --max: 100%;
-  --background-color: var(--nano-color-neutral-300);
-  --content-color: var(--nano-color-neutral-1000);
+  --background-color: var(--nano-color-fill-neutral-weak);
+  --content-color: var(--nano-color-fill-neutral);
   display: grid;
 }
 

package/dist/collection/components/step-accordion/step-accordion.css

@@ -61,7 +61,7 @@
   grid-row: 2;
   inline-size: 1rem;
   min-block-size: 1rem;
-  border-inline-end: 2px solid var(--nano-color-neutral-300);
+  border-inline-end: 2px solid var(--nano-color-border-default);
 }
 .nano-details.step--grid-working::part(base)::after {
   content: "";
@@ -73,8 +73,8 @@
   translate: -50% 0;
   inset-inline-start: calc(50% - 2.5px);
   position: relative;
-  border-inline-end: 2px solid var(--nano-color-neutral-300);
-  border-block-end: 2px solid var(--nano-color-neutral-300);
+  border-inline-end: 2px solid var(--nano-color-border-default);
+  border-block-end: 2px solid var(--nano-color-border-default);
   rotate: 45deg;
 }
 .nano-details:last-of-type::part(base)::before {
@@ -116,17 +116,17 @@
   block-size: 2rem;
   border-radius: var(--nano-border-radius-circle);
   background-color: transparent;
-  color: var(--nano-color-neutral-1400);
-  border: 1px solid var(--nano-color-neutral-300);
+  color: var(--nano-color-text-default);
+  border: 1px solid var(--nano-color-border-default);
 }
 .step.step--complete .step-icon {
-  background-color: var(--nano-color-success-1000);
-  color: var(--nano-color-base-0);
+  background-color: var(--nano-color-fill-success);
+  color: var(--nano-color-basic-white);
   border: none;
 }
 .step[open] .step-icon {
-  background-color: var(--nano-color-primary-1000);
-  color: var(--nano-color-base-0);
+  background-color: var(--nano-color-fill-primary);
+  color: var(--nano-color-basic-white);
   border: none;
 }
 .step .step-change {
@@ -134,5 +134,5 @@
   line-height: var(--nano-line-height-normal);
   letter-spacing: var(--nano-letter-spacing-loose);
   text-decoration: underline;
-  color: var(--nano-color-primary-1200);
+  color: var(--nano-color-text-link);
 }

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

@@ -39,10 +39,10 @@
   }/** Typography */
 :host {
   /**
-  * @prop --background: the background color of the step breadcrumb. Defaults to var(--nano-color-base-0).
+  * @prop --background: the background color of the step breadcrumb. Defaults to var(--nano-color-background-default).
   */
   display: block;
-  --background: var(--nano-color-base-0);
+  --background: var(--nano-color-background-default);
 }
 
 .step-wrapper {
@@ -65,7 +65,7 @@
   display: block;
   flex-grow: 1;
   block-size: 1px;
-  background-color: var(--nano-color-neutral-300);
+  background-color: var(--nano-color-fill-neutral-weak);
   position: absolute;
   inset-block-start: 50%;
   z-index: -1;
@@ -100,8 +100,8 @@
   place-self: center end;
   inset-block-start: 0.5px;
   position: relative;
-  border-inline-end: 1px solid var(--nano-color-neutral-300);
-  border-block-end: 1px solid var(--nano-color-neutral-300);
+  border-inline-end: 1px solid var(--nano-color-fill-neutral-weak);
+  border-block-end: 1px solid var(--nano-color-fill-neutral-weak);
   rotate: -45deg;
 }
 
@@ -141,17 +141,17 @@
   block-size: 1.5rem;
   border-radius: var(--nano-border-radius-circle);
   background-color: transparent;
-  color: var(--nano-color-neutral-1400);
-  border: 1px solid var(--nano-color-neutral-300);
+  color: var(--nano-color-text-default);
+  border: 1px solid var(--nano-color-fill-neutral-weak);
 }
 .step-item--complete .step-item-icon {
-  background-color: var(--nano-color-success-1000);
-  color: var(--nano-color-base-0);
+  background-color: var(--nano-color-fill-success);
+  color: var(--nano-color-basic-white);
   border: none;
 }
 .step-item--active .step-item-icon {
-  background-color: var(--nano-color-primary-1000);
-  color: var(--nano-color-base-0);
+  background-color: var(--nano-color-fill-primary);
+  color: var(--nano-color-basic-white);
   border: none;
 }
 
@@ -179,19 +179,19 @@
   font-size: var(--nano-font-size-xl);
   line-height: var(--nano-line-height-denser);
   text-wrap: balance;
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
 }
 
 .step-trigger-next {
   font-size: var(--nano-font-size-2xs);
   line-height: var(--nano-line-height-normal);
   letter-spacing: var(--nano-letter-spacing-loose);
-  color: var(--nano-color-neutral-1000);
+  color: var(--nano-color-fill-neutral);
 }
 
 .step-trigger-icon {
   margin-inline-start: auto;
-  color: var(--nano-color-primary-1000);
+  color: var(--nano-color-fill-primary);
   transition: var(--nano-transition-x-fast) rotate;
 }
 [open] .step-trigger-icon {
@@ -214,7 +214,7 @@
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  background: conic-gradient(var(--nano-color-success-1000) calc(var(--value) / var(--max) * 360deg), var(--nano-color-neutral-100) 0);
+  background: conic-gradient(var(--nano-color-fill-success) calc(var(--value) / var(--max) * 360deg), var(--nano-color-surface-neutral) 0);
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);
           mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);
 }
@@ -224,8 +224,8 @@
   line-height: var(--nano-line-height-normal);
   font-weight: var(--nano-font-weight-bold);
   white-space: nowrap;
-  color: var(--nano-color-neutral-1000);
+  color: var(--nano-color-fill-neutral);
 }
 .step-progress-title strong {
-  color: var(--nano-color-neutral-1400);
+  color: var(--nano-color-text-default);
 }

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

@@ -39,9 +39,9 @@
   }/**
 * @prop --table-padding: default padding of table cells. Defaults to var(--nano-spacing-md);
 * @prop --table-compact-padding: padding for table cells of compact tables. Defaults to var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));
-* @prop --table-border-color: default border color of table cells. Defaults to var(--nano-color-neutral-200);
-* @prop --table-border-color-header: border color of table header and footer cells. Defaults to var(--nano-color-primary-1000);
-* @prop --table-background: default background color of table cells. Defaults to var(--nano-color-base-0);
+* @prop --table-border-color: default border color of table cells. Defaults to var(--nano-color-surface-sunken);
+* @prop --table-border-color-header: border color of table header and footer cells. Defaults to var(--nano-color-fill-primary);
+* @prop --table-background: default background color of table cells. Defaults to var(--nano-color-background-default);
 * @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%;
 */

package/dist/collection/components/tabs/tab-group.css

@@ -38,19 +38,19 @@
     }
   }:host {
   /**
-   * @prop --border: The border of the tab group. Defaults to `2px solid var(--nano-color-neutral-300)`.
+   * @prop --border: The border of the tab group. Defaults to `2px solid var(--nano-color-fill-neutral-weak)`.
    * @prop --indicator-transition: The time it takes for the indicator to transition. Defaults to `var(--nano-transition-fast)`.
-   * @prop --indicator-color: The color of the indicator. Defaults to `var(--nano-color-primary-1000)`.
-   * @prop --indicator-track-color: The color of the indicator track. Defaults to `var(--nano-color-neutral-300)`.
+   * @prop --indicator-color: The color of the indicator. Defaults to `var(--nano-color-fill-primary)`.
+   * @prop --indicator-track-color: The color of the indicator track. Defaults to `var(--nano-color-fill-neutral-weak)`.
    * @prop --indicator-size: The size of the indicator. Defaults to `0`.
    * @prop --fade-transparency: The transparency of the fade effect. Defaults to `0`.
    * @prop --tab-spacing: The spacing between tabs. Defaults to `var(--nano-spacing-md)`.
    * @prop --content-spacing: The spacing around the content area. Defaults to `var(--nano-spacing-l1-default)`.
    */
-  --border: 2px solid var(--nano-color-neutral-300);
+  --border: 2px solid var(--nano-color-border-default);
   --indicator-transition: var(--nano-transition-fast);
-  --indicator-color: var(--nano-color-primary-1000);
-  --indicator-track-color: var(--nano-color-neutral-300);
+  --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);

package/dist/collection/components/tabs/tab.css

@@ -39,25 +39,25 @@
   }/** Typography */
 :host {
   /**
-   * @prop --border: The border of the tab. Defaults to `2px solid var(--nano-color-neutral-300)`.
-   * @prop --border-hover-color: The color of the border on hover. Defaults to `var(--nano-color-primary-700)`.
-   * @prop --border-active-color: The color of the border when active. Defaults to `var(--nano-color-primary-1000)`.
-   * @prop --text-hover-color: The color of the text on hover. Defaults to `var(--nano-color-primary-1000)`.
-   * @prop --text-active-color: The color of the text when active. Defaults to `var(--nano-color-primary-1000)`.
+   * @prop --border: The border of the tab. Defaults to `2px solid var(--nano-color-fill-neutral-weak)`.
+   * @prop --border-hover-color: The color of the border on hover. Defaults to `var(--nano-color-border-accent-hover)`.
+   * @prop --border-active-color: The color of the border when active. Defaults to `var(--nano-color-fill-primary)`.
+   * @prop --text-hover-color: The color of the text on hover. Defaults to `var(--nano-color-fill-primary)`.
+   * @prop --text-active-color: The color of the text when active. Defaults to `var(--nano-color-fill-primary)`.
    * @prop --padding: The padding of the tab. Defaults to `var(--nano-spacing-md)`.
    */
-  --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);
+  --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-neutral-1400);
+  color: var(--nano-color-text-default);
   border: var(--border);
   border-inline-end-width: 0;
   border-inline-start-width: 0;
@@ -77,7 +77,7 @@
 }
 
 :host(.nano-sortable__dragged) {
-  background: var(--nano-color-base-0);
+  background: var(--nano-color-background-default);
   opacity: 0.9 !important;
   box-shadow: var(--nano-shadow-l0) !important;
 }
@@ -99,6 +99,7 @@
 .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));
@@ -128,6 +129,6 @@
 }
 
 .tab__close-button {
-  color: var(--nano-color-primary-1200);
-  --hover-color: var(--nano-color-primary-700);
+  color: var(--nano-color-icon-default);
+  --hover-color: var(--nano-color-icon-hover);
 }

package/dist/collection/components/tag/tag.css

@@ -38,8 +38,8 @@
     }
   }/*
 * @prop --background: Defaults to var(--nano-color-base-50);
-* @prop --color: Defaults to var(--nano-color-primary-1000);
-* @prop --color-non-interactive: Defaults to var(--nano-color-neutral-1400);
-* @prop --bg-color-hover: Defaults to var(--nano-color-primary-50);
-* @prop --bg-color-active: Defaults to var(--nano-color-primary-75);
+* @prop --color: Defaults to var(--nano-color-fill-primary);
+* @prop --color-non-interactive: Defaults to var(--nano-color-text-default);
+* @prop --bg-color-hover: Defaults to var(--nano-color-fill-secondary-hover);
+* @prop --bg-color-active: Defaults to var(--nano-color-surface-brand-feature);
 */

package/dist/collection/components/tooltip/tooltip.css

@@ -46,8 +46,8 @@
   * @prop --show-delay: delay before showing the tooltip. Defaults to 0.125s.
   * @prop --show-duration: duration of the show transition. Defaults to 0.125s.
   * @prop --show-timing-function: timing function for the show transition. Defaults to ease.
-  * @prop --background: background color of the tooltip. Defaults to var(--nano-color-neutral-1200).
-  * @prop --color: text color of the tooltip. Defaults to var(--nano-color-base-1000).
+  * @prop --background: background color of the tooltip. Defaults to var(--nano-color-fill-neutral).
+  * @prop --color: text color of the tooltip. Defaults to var(--nano-color-surface-contrast).
   * @prop --padding: padding inside the tooltip. Defaults to 0.5rem.
   * @prop --arrow-size: size of the tooltip arrow. Defaults to 5px.
   */
@@ -59,8 +59,8 @@
   --show-delay: var(--nano-transition-x-fast);
   --show-duration: var(--nano-transition-x-fast);
   --show-timing-function: ease;
-  --background: var(--nano-color-neutral-1200);
-  --color: var(--nano-color-base-0);
+  --background: var(--nano-color-surface-contrast);
+  --color: var(--nano-color-text-inverse);
   --padding: var(--nano-spacing-sm);
   --arrow-size: 5px;
   --arrow-offset: 5px;