@nanoporetech-digital/components 8.23.11 → 8.24.1

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-09-21T13:06:52",
+  "timestamp": "2026-10-08T13:33:10",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -640,7 +640,7 @@
         {
           "name": "--close-button-color",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-neutral-400);"
+          "docs": "Defaults to var(--nano-color-fill-neutral-weak);"
         },
         {
           "name": "--icon-size",
@@ -650,12 +650,12 @@
         {
           "name": "--scrim-color",
           "annotation": "prop",
-          "docs": "overlay colour of alert display. Defaults to var(--nano-overlay-background-color);"
+          "docs": "overlay colour of alert display. Defaults to var(--nano-color-overlay-scrim);"
         },
         {
           "name": "--tint-color",
           "annotation": "prop",
-          "docs": "The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);"
+          "docs": "The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-fill-primary-hover);"
         }
       ],
       "slots": [
@@ -3232,42 +3232,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "strength",
-          "type": "\"1\" | \"2\" | \"3\" | \"4\"",
-          "complexType": {
-            "original": "'1' | '2' | '3' | '4'",
-            "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "strength",
-          "reflectToAttr": true,
-          "docs": "The strength / vibrancy of the theme. Defaults to `3`",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "1",
-              "type": "string"
-            },
-            {
-              "value": "2",
-              "type": "string"
-            },
-            {
-              "value": "3",
-              "type": "string"
-            },
-            {
-              "value": "4",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "theme",
           "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
@@ -3369,7 +3333,7 @@
             "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"
               }
             }
@@ -3710,12 +3674,12 @@
         {
           "name": "--pagination-button-active",
           "annotation": "prop",
-          "docs": "Active color of the pagination button. Defaults to var(--nano-color-primary-1000);"
+          "docs": "Active color of the pagination button. Defaults to var(--nano-color-fill-primary);"
         },
         {
           "name": "--pagination-button-color",
           "annotation": "prop",
-          "docs": "The color of the pagination button. Defaults to var(--nano-color-neutral-400);"
+          "docs": "The color of the pagination button. Defaults to var(--nano-color-fill-neutral-weak);"
         }
       ],
       "slots": [
@@ -4363,7 +4327,7 @@
         {
           "name": "--active-background",
           "annotation": "prop",
-          "docs": "Control background when active. Default var(--nano-color-primary-1000);"
+          "docs": "Control background when active. Default var(--nano-color-fill-primary);"
         },
         {
           "name": "--active-foreground",
@@ -4373,37 +4337,37 @@
         {
           "name": "--border-color",
           "annotation": "prop",
-          "docs": "Default control border color. Default var(--nano-color-primary-1000);"
+          "docs": "Default control border color. Default var(--nano-color-fill-primary);"
         },
         {
           "name": "--disabled-background",
           "annotation": "prop",
-          "docs": "Background color when disabled. Default var(--nano-color-neutral-300);"
+          "docs": "Background color when disabled. Default var(--nano-color-fill-neutral-weak);"
         },
         {
           "name": "--disabled-border-color",
           "annotation": "prop",
-          "docs": "Border color when disabled. Default var(--nano-color-neutral-1000);"
+          "docs": "Border color when disabled. Default var(--nano-color-fill-neutral);"
         },
         {
           "name": "--disabled-foreground",
           "annotation": "prop",
-          "docs": "Foreground color when disabled. Default var(--nano-color-neutral-700);"
+          "docs": "Foreground color when disabled. Default var(--nano-color-fill-neutral);"
         },
         {
           "name": "--disabled-label-color",
           "annotation": "prop",
-          "docs": "Label color when disabled. Default var(--nano-color-neutral-1000);"
+          "docs": "Label color when disabled. Default var(--nano-color-fill-neutral);"
         },
         {
           "name": "--error-color",
           "annotation": "prop",
-          "docs": "Error color. Default var(--nano-color-danger-1100);"
+          "docs": "Error color. Default var(--nano-color-fill-danger-hover);"
         },
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "Default label color. Default var(--nano-color-base-1000);"
+          "docs": "Default label color. Default var(--nano-color-surface-contrast);"
         },
         {
           "name": "--spacing",
@@ -4919,17 +4883,17 @@
         {
           "name": "--help-msg-color",
           "annotation": "prop",
-          "docs": "The color of the help message. Defaults to var(--nano-color-base-1000)."
+          "docs": "The color of the help message. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--invalid-msg-color",
           "annotation": "prop",
-          "docs": "The color of the error message. Defaults to var(--nano-color-danger-1100)."
+          "docs": "The color of the error message. Defaults to var(--nano-color-fill-danger-hover)."
         },
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "The color of the label text. Defaults to var(--nano-color-base-1000)."
+          "docs": "The color of the label text. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--label-font-size",
@@ -5103,12 +5067,12 @@
       "listeners": [],
       "styles": [
         {
-          "name": "--color-bg - Background color of the component. Defaults to var(--nano-color-base-0).",
+          "name": "--color-bg - Background color of the component. Defaults to var(--nano-color-background-default).",
           "annotation": "prop",
           "docs": ""
         },
         {
-          "name": "--color-border - Border color of the component. Defaults to var(--nano-color-neutral-200).",
+          "name": "--color-border - Border color of the component. Defaults to var(--nano-color-surface-sunken).",
           "annotation": "prop",
           "docs": ""
         },
@@ -5187,17 +5151,17 @@
         {
           "name": "--color-active",
           "annotation": "prop",
-          "docs": "The active text and chevron colour. defaults to var(--nano-color-primary-1000)"
+          "docs": "The active text and chevron colour. defaults to var(--nano-color-fill-primary)"
         },
         {
           "name": "--color-border",
           "annotation": "prop",
-          "docs": "The border colour. defaults to var(--nano-color-neutral-200)"
+          "docs": "The border colour. defaults to var(--nano-color-surface-sunken)"
         },
         {
           "name": "--color-disabled",
           "annotation": "prop",
-          "docs": "The disabled text and chevron colour. defaults to var(--nano-color-neutral-800)"
+          "docs": "The disabled text and chevron colour. defaults to var(--nano-color-fill-neutral)"
         },
         {
           "name": "--icon-size",
@@ -5212,7 +5176,7 @@
         {
           "name": "--text-color",
           "annotation": "prop",
-          "docs": "The primary text and chevron colour. defaults to var(--nano-color-neutral-1400)"
+          "docs": "The primary text and chevron colour. defaults to var(--nano-color-text-default)"
         }
       ],
       "slots": [],
@@ -5399,11 +5363,15 @@
         },
         {
           "name": "theme",
-          "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+          "type": "{ 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; }",
           "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",
@@ -5413,29 +5381,53 @@
           },
           "mutable": false,
           "attr": "theme",
-          "reflectToAttr": true,
+          "reflectToAttr": false,
           "docs": "The semantic theme of the button. Defaults to primary / brand blue",
           "docsTags": [],
           "values": [
             {
-              "value": "danger",
-              "type": "string"
+              "type": "{ readonly [x: number]: string; [Symbol.iterator]: () => IterableIterator<string>; search: { (regexp: string"
             },
             {
-              "value": "neutral",
-              "type": "string"
+              "type": "RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; replace: { (searchValue: string"
             },
             {
-              "value": "primary",
-              "type": "string"
+              "type": "RegExp, replaceValue: string): string; (searchValue: string"
             },
             {
-              "value": "success",
+              "type": "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"
+            },
+            {
+              "type": "string[], options?: CollatorOptions): number; (that: string, locales?: LocalesArgument, options?: CollatorOptions): number; }; match: { (regexp: string"
+            },
+            {
+              "type": "RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; slice: (start?: number, end?: number) => string; split: { (separator: string"
+            },
+            {
+              "type": "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"
+            },
+            {
+              "type": "string[]): string; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string"
+            },
+            {
+              "type": "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\""
+            },
+            {
+              "value": "NFD",
               "type": "string"
             },
             {
-              "value": "warning",
+              "value": "NFKC",
               "type": "string"
+            },
+            {
+              "type": "\"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"
+            },
+            {
+              "type": "RegExp, replaceValue: string): string; (searchValue: string"
+            },
+            {
+              "type": "RegExp, replacer: (substring: string, ...args: any[]) => string): string; }; at: (index: number) => string; toString: () => string; valueOf: () => string; }"
             }
           ],
           "optional": true,
@@ -6636,17 +6628,17 @@
       "listeners": [],
       "styles": [
         {
-          "name": "--table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`",
+          "name": "--table-background. The background color of the table cells. Defaults to `var(--nano-color-background-default)`",
           "annotation": "prop",
           "docs": ""
         },
         {
-          "name": "--table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`",
+          "name": "--table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-fill-primary)`",
           "annotation": "prop",
           "docs": ""
         },
         {
-          "name": "--table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`",
+          "name": "--table-border-color. The border color of the table cells. Defaults to `var(--nano-color-surface-sunken)`",
           "annotation": "prop",
           "docs": ""
         },
@@ -6656,7 +6648,7 @@
           "docs": ""
         },
         {
-          "name": "--table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`",
+          "name": "--table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-surface-neutral)`",
           "annotation": "prop",
           "docs": ""
         },
@@ -7118,7 +7110,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "default text color of content other than `nano-option`. Defaults to var(--nano-color-neutral-1000)"
+          "docs": "default text color of content other than `nano-option`. Defaults to var(--nano-color-fill-neutral)"
         },
         {
           "name": "--font-size",
@@ -8820,17 +8812,17 @@
         {
           "name": "--active-color",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-color-primary-1000);"
+          "docs": "defaults to var(--nano-color-fill-primary);"
         },
         {
           "name": "--active-text-color",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-color-base-0);"
+          "docs": "defaults to var(--nano-color-background-default);"
         },
         {
           "name": "--inactive-color",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-color-neutral-300);"
+          "docs": "defaults to var(--nano-color-fill-neutral-weak);"
         }
       ],
       "slots": [],
@@ -9125,12 +9117,12 @@
           "docs": ""
         },
         {
-          "name": "--btn-bg-color--active - background color of trigger on active. Defaults to var(--nano-color-primary-300)",
+          "name": "--btn-bg-color--active - background color of trigger on active. Defaults to var(--nano-color-fill-secondary-pressed)",
           "annotation": "prop",
           "docs": ""
         },
         {
-          "name": "--btn-bg-color--hover - background color of trigger on hover. Defaults to var(--nano-color-primary-100)",
+          "name": "--btn-bg-color--hover - background color of trigger on hover. Defaults to var(--nano-color-fill-secondary-hover)",
           "annotation": "prop",
           "docs": ""
         },
@@ -9708,22 +9700,22 @@
         {
           "name": "--close-button-color",
           "annotation": "prop",
-          "docs": "color of the close button. Defaults to var(--nano-color-primary-1200)."
+          "docs": "color of the close button. Defaults to var(--nano-color-fill-primary-pressed)."
         },
         {
           "name": "--content-background",
           "annotation": "prop",
-          "docs": "background color of the dialog content. Defaults to var(--nano-color-neutral-75)."
+          "docs": "background color of the dialog content. Defaults to var(--nano-color-surface-subtle)."
         },
         {
           "name": "--content-color",
           "annotation": "prop",
-          "docs": "text color of the dialog content. Defaults to var(--nano-color-neutral-1000)."
+          "docs": "text color of the dialog content. Defaults to var(--nano-color-fill-neutral)."
         },
         {
           "name": "--footer-content",
           "annotation": "prop",
-          "docs": "background color of the dialog footer. Defaults to var(--nano-color-neutral-75)."
+          "docs": "background color of the dialog footer. Defaults to var(--nano-color-surface-subtle)."
         },
         {
           "name": "--footer-padding-h",
@@ -9753,7 +9745,7 @@
         {
           "name": "--scrim-color",
           "annotation": "prop",
-          "docs": "color of the dialog scrim. Defaults to var(--nano-overlay-background-color)."
+          "docs": "color of the dialog scrim. Defaults to var(--nano-color-overlay-scrim)."
         },
         {
           "name": "--width",
@@ -10382,7 +10374,7 @@
         {
           "name": "--footer-background",
           "annotation": "prop",
-          "docs": "Background color of the footer. Defaults to var(--nano-color-neutral-75)."
+          "docs": "Background color of the footer. Defaults to var(--nano-color-surface-subtle)."
         },
         {
           "name": "--footer-spacing",
@@ -10392,12 +10384,12 @@
         {
           "name": "--header-background",
           "annotation": "prop",
-          "docs": "Background color of the header. Defaults to var(--nano-color-neutral-75)."
+          "docs": "Background color of the header. Defaults to var(--nano-color-surface-subtle)."
         },
         {
           "name": "--header-button-color",
           "annotation": "prop",
-          "docs": "Color of the header button. Defaults to var(--nano-color-neutral-75)."
+          "docs": "Color of the header button. Defaults to var(--nano-color-surface-subtle)."
         },
         {
           "name": "--header-spacing",
@@ -10417,7 +10409,7 @@
         {
           "name": "--panel-background",
           "annotation": "prop",
-          "docs": "Background color of the panel. Defaults to var(--nano-color-neutral-75)."
+          "docs": "Background color of the panel. Defaults to var(--nano-color-surface-subtle)."
         },
         {
           "name": "--panel-shadow",
@@ -10427,7 +10419,7 @@
         {
           "name": "--scrim-color",
           "annotation": "prop",
-          "docs": "Color of the scrim. Defaults to var(--nano-overlay-background-color)."
+          "docs": "Color of the scrim. Defaults to var(--nano-color-overlay-scrim)."
         },
         {
           "name": "--size",
@@ -11049,7 +11041,7 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Defaults to 'var(--nano-color-neutral-75)';"
+          "docs": "Defaults to 'var(--nano-color-surface-subtle)';"
         },
         {
           "name": "--border",
@@ -14634,34 +14626,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "color",
-          "type": "\"neutral\" | \"primary\"",
-          "complexType": {
-            "original": "'primary' | 'neutral'",
-            "resolved": "\"neutral\" | \"primary\"",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": false,
-          "docs": "Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "neutral",
-              "type": "string"
-            },
-            {
-              "value": "primary",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "flipRtl",
           "type": "boolean",
@@ -15356,7 +15320,7 @@
         {
           "name": "--active-color",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-neutral-800)."
+          "docs": "Defaults to var(--nano-color-fill-neutral)."
         },
         {
           "name": "--border-radius",
@@ -15376,7 +15340,7 @@
         {
           "name": "--hover-color",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-primary-1100)."
+          "docs": "Defaults to var(--nano-color-fill-primary-hover)."
         },
         {
           "name": "--padding",
@@ -15935,12 +15899,12 @@
         {
           "name": "--color-bg",
           "annotation": "prop",
-          "docs": "The background color for the nav. Defaults to var(--nano-color-primary-75)"
+          "docs": "The background color for the nav. Defaults to var(--nano-color-surface-brand-feature)"
         },
         {
           "name": "--color-border-active",
           "annotation": "prop",
-          "docs": "The border color for the active list items. Defaults to var(--nano-color-primary-1000)"
+          "docs": "The border color for the active list items. Defaults to var(--nano-color-fill-primary)"
         },
         {
           "name": "--color-bottom-border",
@@ -15950,12 +15914,12 @@
         {
           "name": "--color-primary",
           "annotation": "prop",
-          "docs": "The primary color for the secondary list items. Defaults to var(--nano-color-primary-1100)"
+          "docs": "The primary color for the secondary list items. Defaults to var(--nano-color-fill-primary-hover)"
         },
         {
           "name": "--color-text",
           "annotation": "prop",
-          "docs": "The text color for the main list items. Defaults to var(--nano-color-neutral-1400)"
+          "docs": "The text color for the main list items. Defaults to var(--nano-color-text-default)"
         },
         {
           "name": "--color-text-hover",
@@ -17728,27 +17692,27 @@
         {
           "name": "--color-invalid",
           "annotation": "prop",
-          "docs": "Color of invalid messaging. Defaults to var(--nano-color-danger-1100)."
+          "docs": "Color of invalid messaging. Defaults to var(--nano-color-fill-danger-hover)."
         },
         {
           "name": "--color-valid",
           "annotation": "prop",
-          "docs": "Color of valid messaging. Defaults to var(--nano-color-success-1000)."
+          "docs": "Color of valid messaging. Defaults to var(--nano-color-fill-success)."
         },
         {
           "name": "--help-msg-color",
           "annotation": "prop",
-          "docs": "Color of help message. Defaults to var(--nano-color-base-1000)."
+          "docs": "Color of help message. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--input-bg-color",
           "annotation": "prop",
-          "docs": "Background color of input. Defaults to var(--nano-color-base-0)."
+          "docs": "Background color of input. Defaults to var(--nano-color-background-default)."
         },
         {
           "name": "--input-border-color",
           "annotation": "prop",
-          "docs": "Border color of input. Defaults to var(--nano-color-neutral-300)."
+          "docs": "Border color of input. Defaults to var(--nano-color-fill-neutral-weak)."
         },
         {
           "name": "--input-border-radius",
@@ -17763,7 +17727,7 @@
         {
           "name": "--input-border-style--focus",
           "annotation": "prop",
-          "docs": "Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700)."
+          "docs": "Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-border-accent-hover)."
         },
         {
           "name": "--input-border-width",
@@ -17783,7 +17747,7 @@
         {
           "name": "--input-text-color",
           "annotation": "prop",
-          "docs": "Text color of input. Defaults to var(--nano-color-base-1000)."
+          "docs": "Text color of input. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--invalid-msg-color",
@@ -17793,7 +17757,7 @@
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "Color of label. Defaults to var(--nano-color-base-1000)."
+          "docs": "Color of label. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--label-font-size",
@@ -17828,7 +17792,7 @@
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of placeholder. Defaults to var(--nano-color-neutral-1000)."
+          "docs": "Color of placeholder. Defaults to var(--nano-color-fill-neutral)."
         }
       ],
       "slots": [
@@ -19059,7 +19023,7 @@
           "docs": ""
         },
         {
-          "name": "--indicator-color. The color of the indicator. Defaults to `var(--nano-color-primary-1000)`.",
+          "name": "--indicator-color. The color of the indicator. Defaults to `var(--nano-color-fill-primary)`.",
           "annotation": "prop",
           "docs": ""
         },
@@ -19069,7 +19033,7 @@
           "docs": ""
         },
         {
-          "name": "--indicator-track-color. The color of the indicator track. Defaults to `var(--nano-color-neutral-300)`.",
+          "name": "--indicator-track-color. The color of the indicator track. Defaults to `var(--nano-color-fill-neutral-weak)`.",
           "annotation": "prop",
           "docs": ""
         },
@@ -19426,7 +19390,7 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "background color of the menu. Default to 'var(--nano-color-neutral-75)';"
+          "docs": "background color of the menu. Default to 'var(--nano-color-surface-subtle)';"
         },
         {
           "name": "--font-size",
@@ -20627,7 +20591,7 @@
         {
           "name": "--bg-focus",
           "annotation": "prop",
-          "docs": "background color when focused. Defaults to var(--nano-color-primary-300);"
+          "docs": "background color when focused. Defaults to var(--nano-color-fill-secondary-pressed);"
         },
         {
           "name": "--bg-selected",
@@ -20637,17 +20601,17 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "default text color. Defaults to var(--nano-color-base-1000);"
+          "docs": "default text color. Defaults to var(--nano-color-surface-contrast);"
         },
         {
           "name": "--color-disabled",
           "annotation": "prop",
-          "docs": "text color when disabled. Defaults to var(--nano-color-neutral-300);"
+          "docs": "text color when disabled. Defaults to var(--nano-color-fill-neutral-weak);"
         },
         {
           "name": "--color-focus",
           "annotation": "prop",
-          "docs": "text color when focused. Defaults to var(--nano-color-base-1000);"
+          "docs": "text color when focused. Defaults to var(--nano-color-surface-contrast);"
         },
         {
           "name": "--color-selected",
@@ -20897,12 +20861,12 @@
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "Color of the progress indicator. Defaults to var(--nano-color-primary-1000);"
+          "docs": "Color of the progress indicator. Defaults to var(--nano-color-fill-primary);"
         },
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "Color of the progress track. Defaults to var(--nano-color-neutral-300);"
+          "docs": "Color of the progress track. Defaults to var(--nano-color-fill-neutral-weak);"
         }
       ],
       "slots": [
@@ -21414,12 +21378,12 @@
         {
           "name": "--bar-background",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-neutral-300);"
+          "docs": "Defaults to var(--nano-color-fill-neutral-weak);"
         },
         {
           "name": "--bar-background-active",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-primary-1000);"
+          "docs": "Defaults to var(--nano-color-fill-primary);"
         },
         {
           "name": "--bar-height",
@@ -21429,17 +21393,17 @@
         {
           "name": "--inactive-color",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-neutral-800);"
+          "docs": "Defaults to var(--nano-color-fill-neutral);"
         },
         {
           "name": "--knob-active-color",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-primary-1400);"
+          "docs": "Defaults to var(--nano-color-surface-heavy-feature-pressed);"
         },
         {
           "name": "--knob-color",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-primary-1200);"
+          "docs": "Defaults to var(--nano-color-fill-primary-pressed);"
         },
         {
           "name": "--knob-height",
@@ -21454,12 +21418,12 @@
         {
           "name": "--tooltip-background",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-base-0);"
+          "docs": "Defaults to var(--nano-color-background-default);"
         },
         {
           "name": "--tooltip-color",
           "annotation": "prop",
-          "docs": "Defaults to var(--nano-color-neutral-1400);"
+          "docs": "Defaults to var(--nano-color-text-default);"
         }
       ],
       "slots": [
@@ -21929,12 +21893,12 @@
         {
           "name": "--symbol-color",
           "annotation": "prop",
-          "docs": "The default color for symbols. Defaults to `var(--nano-color-neutral-400)`"
+          "docs": "The default color for symbols. Defaults to `var(--nano-color-fill-neutral-weak)`"
         },
         {
           "name": "--symbol-color-active",
           "annotation": "prop",
-          "docs": "The active color for symbols. Defaults to `var(--nano-color-primary-1200)`"
+          "docs": "The active color for symbols. Defaults to `var(--nano-color-fill-primary-pressed)`"
         },
         {
           "name": "--symbol-size",
@@ -23348,27 +23312,27 @@
         {
           "name": "--color-invalid",
           "annotation": "prop",
-          "docs": "Color of invalid messaging. Defaults to var(--nano-color-danger-1100)."
+          "docs": "Color of invalid messaging. Defaults to var(--nano-color-fill-danger-hover)."
         },
         {
           "name": "--color-valid",
           "annotation": "prop",
-          "docs": "Color of valid messaging. Defaults to var(--nano-color-success-1000)."
+          "docs": "Color of valid messaging. Defaults to var(--nano-color-fill-success)."
         },
         {
           "name": "--help-msg-color",
           "annotation": "prop",
-          "docs": "Color of help message. Defaults to var(--nano-color-base-1000)."
+          "docs": "Color of help message. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--input-bg-color",
           "annotation": "prop",
-          "docs": "Background color of input. Defaults to var(--nano-color-base-0)."
+          "docs": "Background color of input. Defaults to var(--nano-color-background-default)."
         },
         {
           "name": "--input-border-color",
           "annotation": "prop",
-          "docs": "Border color of input. Defaults to var(--nano-color-neutral-300)."
+          "docs": "Border color of input. Defaults to var(--nano-color-fill-neutral-weak)."
         },
         {
           "name": "--input-border-radius",
@@ -23383,7 +23347,7 @@
         {
           "name": "--input-border-style--focus",
           "annotation": "prop",
-          "docs": "Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700)."
+          "docs": "Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-border-accent-hover)."
         },
         {
           "name": "--input-border-width",
@@ -23403,7 +23367,7 @@
         {
           "name": "--input-text-color",
           "annotation": "prop",
-          "docs": "Text color of input. Defaults to var(--nano-color-base-1000)."
+          "docs": "Text color of input. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--invalid-msg-color",
@@ -23413,7 +23377,7 @@
         {
           "name": "--label-color",
           "annotation": "prop",
-          "docs": "Color of label. Defaults to var(--nano-color-base-1000)."
+          "docs": "Color of label. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--label-font-size",
@@ -23453,7 +23417,7 @@
         {
           "name": "--placeholder-color",
           "annotation": "prop",
-          "docs": "Color of placeholder. Defaults to var(--nano-color-neutral-1000)."
+          "docs": "Color of placeholder. Defaults to var(--nano-color-fill-neutral)."
         }
       ],
       "slots": [
@@ -24579,17 +24543,17 @@
         {
           "name": "--dot-color",
           "annotation": "prop",
-          "docs": "inactive colour of pager bullets. Defaults to var(--nano-color-neutral-400);"
+          "docs": "inactive colour of pager bullets. Defaults to var(--nano-color-fill-neutral-weak);"
         },
         {
           "name": "--dot-color-active",
           "annotation": "prop",
-          "docs": "active colour of pager bullets. Defaults to var(--nano-color-primary-1000);"
+          "docs": "active colour of pager bullets. Defaults to var(--nano-color-fill-primary);"
         },
         {
           "name": "--fsbtn-bg-color",
           "annotation": "prop",
-          "docs": "fullscreen bg color. Default var(--nano-color-base-0);"
+          "docs": "fullscreen bg color. Default var(--nano-color-background-default);"
         },
         {
           "name": "--fsbtn-icon-color",
@@ -24599,12 +24563,12 @@
         {
           "name": "--navbtns-bg-color",
           "annotation": "prop",
-          "docs": "next / prev bg color. Defaults to var(--nano-color-base-0);"
+          "docs": "next / prev bg color. Defaults to var(--nano-color-background-default);"
         },
         {
           "name": "--navbtns-bg-color-disabled",
           "annotation": "prop",
-          "docs": "next / prev bg color. Default var(--nano-color-base-0);"
+          "docs": "next / prev bg color. Default var(--nano-color-background-default);"
         },
         {
           "name": "--navbtns-height",
@@ -24624,7 +24588,7 @@
         {
           "name": "--navbtns-icon-color-hover",
           "annotation": "prop",
-          "docs": "next / prev icon color on hover. Default var(--nano-color-primary-1000);"
+          "docs": "next / prev icon color on hover. Default var(--nano-color-fill-primary);"
         },
         {
           "name": "--navbtns-width",
@@ -25495,7 +25459,7 @@
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "Color of the spinner indicator. Defaults to var(--nano-color-primary-1000)."
+          "docs": "Color of the spinner indicator. Defaults to var(--nano-color-fill-primary)."
         },
         {
           "name": "--overlay-color",
@@ -25505,7 +25469,7 @@
         {
           "name": "--track-color",
           "annotation": "prop",
-          "docs": "Color of the spinner track. Defaults to var(--nano-color-neutral-300)."
+          "docs": "Color of the spinner track. Defaults to var(--nano-color-fill-neutral-weak)."
         },
         {
           "name": "--track-size",
@@ -25925,12 +25889,12 @@
         {
           "name": "--background-color",
           "annotation": "prop",
-          "docs": "The background color of the divider. Default var(--nano-color-neutral-300)."
+          "docs": "The background color of the divider. Default var(--nano-color-fill-neutral-weak)."
         },
         {
           "name": "--content-color",
           "annotation": "prop",
-          "docs": "The text color of the divider. Default var(--nano-color-neutral-1000)."
+          "docs": "The text color of the divider. Default var(--nano-color-fill-neutral)."
         },
         {
           "name": "--divider-hit-area",
@@ -26236,7 +26200,7 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "the background color of the step breadcrumb. Defaults to var(--nano-color-base-0)."
+          "docs": "the background color of the step breadcrumb. Defaults to var(--nano-color-background-default)."
         }
       ],
       "slots": [],
@@ -27049,17 +27013,17 @@
         {
           "name": "--border",
           "annotation": "prop",
-          "docs": "The border of the tab. Defaults to `2px solid var(--nano-color-neutral-300)`."
+          "docs": "The border of the tab. Defaults to `2px solid var(--nano-color-fill-neutral-weak)`."
         },
         {
           "name": "--border-active-color",
           "annotation": "prop",
-          "docs": "The color of the border when active. Defaults to `var(--nano-color-primary-1000)`."
+          "docs": "The color of the border when active. Defaults to `var(--nano-color-fill-primary)`."
         },
         {
           "name": "--border-hover-color",
           "annotation": "prop",
-          "docs": "The color of the border on hover. Defaults to `var(--nano-color-primary-700)`."
+          "docs": "The color of the border on hover. Defaults to `var(--nano-color-border-accent-hover)`."
         },
         {
           "name": "--padding",
@@ -27069,12 +27033,12 @@
         {
           "name": "--text-active-color",
           "annotation": "prop",
-          "docs": "The color of the text when active. Defaults to `var(--nano-color-primary-1000)`."
+          "docs": "The color of the text when active. Defaults to `var(--nano-color-fill-primary)`."
         },
         {
           "name": "--text-hover-color",
           "annotation": "prop",
-          "docs": "The color of the text on hover. Defaults to `var(--nano-color-primary-1000)`."
+          "docs": "The color of the text on hover. Defaults to `var(--nano-color-fill-primary)`."
         }
       ],
       "slots": [
@@ -27598,7 +27562,7 @@
         {
           "name": "--border",
           "annotation": "prop",
-          "docs": "The border of the tab group. Defaults to `2px solid var(--nano-color-neutral-300)`."
+          "docs": "The border of the tab group. Defaults to `2px solid var(--nano-color-fill-neutral-weak)`."
         },
         {
           "name": "--content-spacing",
@@ -27613,7 +27577,7 @@
         {
           "name": "--indicator-color",
           "annotation": "prop",
-          "docs": "The color of the indicator. Defaults to `var(--nano-color-primary-1000)`."
+          "docs": "The color of the indicator. Defaults to `var(--nano-color-fill-primary)`."
         },
         {
           "name": "--indicator-size",
@@ -27623,7 +27587,7 @@
         {
           "name": "--indicator-track-color",
           "annotation": "prop",
-          "docs": "The color of the indicator track. Defaults to `var(--nano-color-neutral-300)`."
+          "docs": "The color of the indicator track. Defaults to `var(--nano-color-fill-neutral-weak)`."
         },
         {
           "name": "--indicator-transition",
@@ -27843,17 +27807,17 @@
         {
           "name": "--table-background",
           "annotation": "prop",
-          "docs": "default background color of table cells. Defaults to var(--nano-color-base-0);"
+          "docs": "default background color of table cells. Defaults to var(--nano-color-background-default);"
         },
         {
           "name": "--table-border-color",
           "annotation": "prop",
-          "docs": "default border color of table cells. Defaults to var(--nano-color-neutral-200);"
+          "docs": "default border color of table cells. Defaults to var(--nano-color-surface-sunken);"
         },
         {
           "name": "--table-border-color-header",
           "annotation": "prop",
-          "docs": "border color of table header and footer cells. Defaults to var(--nano-color-primary-1000);"
+          "docs": "border color of table header and footer cells. Defaults to var(--nano-color-fill-primary);"
         },
         {
           "name": "--table-compact-padding",
@@ -28472,7 +28436,7 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "background color of the tooltip. Defaults to var(--nano-color-neutral-1200)."
+          "docs": "background color of the tooltip. Defaults to var(--nano-color-fill-neutral)."
         },
         {
           "name": "--border-radius",
@@ -28482,7 +28446,7 @@
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "text color of the tooltip. Defaults to var(--nano-color-base-1000)."
+          "docs": "text color of the tooltip. Defaults to var(--nano-color-surface-contrast)."
         },
         {
           "name": "--hide-delay",