@nanoporetech-digital/components 8.23.11 → 9.0.0

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/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;

package/dist/components/badge.js

@@ -12,14 +12,11 @@ const NanoBadge = /*@__PURE__*/ proxyCustomElement(class NanoBadge extends HTMLE
     }
     /** 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 style() { return badgeCss; }
 }, [0, "nano-badge", {
         "theme": [513],
-        "strength": [513],
         "pulse": [516]
     }]);
 function defineCustomElement() {

package/dist/components/cta.js

@@ -39,7 +39,7 @@ const NanoCta = /*@__PURE__*/ proxyCustomElement(class NanoCta extends HTMLEleme
     }
     static get style() { return ctaCss; }
 }, [0, "nano-cta", {
-        "theme": [513],
+        "theme": [16],
         "secondary": [516],
         "size": [513],
         "loading": [516],

package/dist/components/datalist.js

@@ -9,7 +9,7 @@ import { g as getDirectChildren } from './dom.js';
 import { d as defineCustomElement$2 } from './dropdown.js';
 import { d as defineCustomElement$1 } from './menu.js';
 
-const datalistCss = ":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{--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(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";
+const datalistCss = ":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{--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-text-default);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";
 
 function findLabel(formCtrl) {
     let foundLabel;

package/dist/components/date-picker.js

@@ -315,7 +315,7 @@ const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization
             h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
 };
 
-const datePickerCss = ":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{--active-color:var(--nano-color-primary-1000);--active-text-color:var(--nano-color-base-0);--inactive-color:var(--nano-color-neutral-300);display:block;font-size:16px;background:var(--nano-color-neutral-50)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{min-inline-size:290px;padding:var(--nano-spacing-md);position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center;padding:0 0 3px}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:not(.is-disabled):active{background:color-mix(in srgb, var(--active-color), black 20%);color:var(--active-text-color)}.duet-date__day:focus-visible{outline:var(--nano-focus-ring);outline-offset:-1px;z-index:2}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.8;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--nano-spacing-md);inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus-visible,.duet-date__next:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__prev:active,.duet-date__next:active{background:color-mix(in srgb, var(--inactive-color), black 20%)}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.7}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select:focus-visible:focus+.duet-date__select-label{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__select-label{align-items:center;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
+const datePickerCss = ":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{--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-surface-subtle)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{min-inline-size:290px;padding:var(--nano-spacing-md);position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center;padding:0 0 3px}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:not(.is-disabled):active{background:color-mix(in srgb, var(--active-color), black 20%);color:var(--active-text-color)}.duet-date__day:focus-visible{outline:var(--nano-focus-ring);outline-offset:-1px;z-index:2}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.8;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--nano-spacing-md);inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus-visible,.duet-date__next:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__prev:active,.duet-date__next:active{background:color-mix(in srgb, var(--inactive-color), black 20%)}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.7}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select:focus-visible:focus+.duet-date__select-label{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__select-label{align-items:center;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
 
 function range(from, to) {
     const result = [];