@haiilo/catalyst 7.0.0 → 7.1.0

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

@@ -26,6 +26,10 @@
 .cat-bg-primary {
   background-color: rgb(var(--cat-primary-bg, 0, 129, 148)) !important;
   color: rgb(var(--cat-primary-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-primary-hover {
@@ -34,6 +38,10 @@
 .cat-bg-primary-hover:hover {
   background-color: rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;
   color: rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-primary,
@@ -57,6 +65,10 @@
 .cat-bg-primaryInverted {
   background-color: #93b4f2 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-primaryInverted-hover {
@@ -65,6 +77,10 @@
 .cat-bg-primaryInverted-hover:hover {
   background-color: #93b4f2 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-primaryInverted,
@@ -88,6 +104,10 @@
 .cat-bg-secondary {
   background-color: rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-secondary-hover {
@@ -96,6 +116,10 @@
 .cat-bg-secondary-hover:hover {
   background-color: rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-secondary,
@@ -119,6 +143,10 @@
 .cat-bg-secondaryInverted {
   background-color: #697687 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-secondaryInverted-hover {
@@ -127,6 +155,10 @@
 .cat-bg-secondaryInverted-hover:hover {
   background-color: #697687 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-secondaryInverted,
@@ -147,9 +179,52 @@
   color: white !important;
 }
 
+.cat-bg-info {
+  background-color: rgb(var(--cat-success-bg, 0, 115, 230)) !important;
+  color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
+}
+
+.cat-bg-info-hover {
+  transition: background-color 125ms, color 125ms;
+}
+.cat-bg-info-hover:hover {
+  background-color: rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;
+  color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
+}
+
+.cat-text-info,
+.cat-link-info {
+  color: rgb(var(--cat-success-text, 0, 115, 230)) !important;
+}
+
+.cat-link-info,
+.cat-text-info-hover {
+  transition: color 125ms;
+}
+.cat-link-info:hover,
+.cat-text-info-hover:hover {
+  color: rgb(var(--cat-success-text-hover, 0, 107, 227)) !important;
+}
+.cat-link-info:active,
+.cat-text-info-hover:active {
+  color: rgb(var(--cat-success-text-active, 0, 96, 223)) !important;
+}
+
 .cat-bg-success {
   background-color: rgb(var(--cat-success-bg, 0, 132, 88)) !important;
   color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-success-hover {
@@ -158,6 +233,10 @@
 .cat-bg-success-hover:hover {
   background-color: rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;
   color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-success,
@@ -181,6 +260,10 @@
 .cat-bg-warning {
   background-color: rgb(var(--cat-warning-bg, 255, 206, 128)) !important;
   color: rgb(var(--cat-warning-fill, 0, 0, 0)) !important;
+  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-warning-hover {
@@ -189,6 +272,10 @@
 .cat-bg-warning-hover:hover {
   background-color: rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;
   color: rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;
+  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-warning,
@@ -212,6 +299,10 @@
 .cat-bg-danger {
   background-color: rgb(var(--cat-danger-bg, 217, 52, 13)) !important;
   color: rgb(var(--cat-danger-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-danger-hover {
@@ -220,6 +311,10 @@
 .cat-bg-danger-hover:hover {
   background-color: rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;
   color: rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-danger,
@@ -244,10 +339,22 @@
   color: rgb(var(--cat-primary-text, 0, 129, 148)) !important;
 }
 
+.cat-text-active {
+  color: rgb(var(--cat-primary-text, 0, 129, 148)) !important;
+}
+
 .cat-muted {
   color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;
 }
 
+.cat-text-muted {
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;
+}
+
+.cat-bg-muted {
+  background-color: #f2f4f7 !important;
+}
+
 .cat-text-reset {
   color: inherit !important;
 }

package/dist/collection/components/cat-select/cat-select.js

@@ -770,12 +770,12 @@ export class CatSelect {
           "references": {
             "CatSelectTaggingValue": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::CatSelectTaggingValue"
             },
             "CatSelectMultipleTaggingValue": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::CatSelectMultipleTaggingValue"
             }
           }
@@ -1168,7 +1168,7 @@ export class CatSelect {
             },
             "CatSelectConnector": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::CatSelectConnector"
             },
             "Observable": {
@@ -1178,7 +1178,7 @@ export class CatSelect {
             },
             "Item": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::Item"
             }
           },

package/dist/collection/components/cat-textarea/cat-textarea.css

@@ -26,6 +26,10 @@
 .cat-bg-primary {
   background-color: rgb(var(--cat-primary-bg, 0, 129, 148)) !important;
   color: rgb(var(--cat-primary-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-primary-hover {
@@ -34,6 +38,10 @@
 .cat-bg-primary-hover:hover {
   background-color: rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;
   color: rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-primary,
@@ -57,6 +65,10 @@
 .cat-bg-primaryInverted {
   background-color: #93b4f2 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-primaryInverted-hover {
@@ -65,6 +77,10 @@
 .cat-bg-primaryInverted-hover:hover {
   background-color: #93b4f2 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-primaryInverted,
@@ -88,6 +104,10 @@
 .cat-bg-secondary {
   background-color: rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-secondary-hover {
@@ -96,6 +116,10 @@
 .cat-bg-secondary-hover:hover {
   background-color: rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-secondary,
@@ -119,6 +143,10 @@
 .cat-bg-secondaryInverted {
   background-color: #697687 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-secondaryInverted-hover {
@@ -127,6 +155,10 @@
 .cat-bg-secondaryInverted-hover:hover {
   background-color: #697687 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-secondaryInverted,
@@ -147,9 +179,52 @@
   color: white !important;
 }
 
+.cat-bg-info {
+  background-color: rgb(var(--cat-success-bg, 0, 115, 230)) !important;
+  color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
+}
+
+.cat-bg-info-hover {
+  transition: background-color 125ms, color 125ms;
+}
+.cat-bg-info-hover:hover {
+  background-color: rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;
+  color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
+}
+
+.cat-text-info,
+.cat-link-info {
+  color: rgb(var(--cat-success-text, 0, 115, 230)) !important;
+}
+
+.cat-link-info,
+.cat-text-info-hover {
+  transition: color 125ms;
+}
+.cat-link-info:hover,
+.cat-text-info-hover:hover {
+  color: rgb(var(--cat-success-text-hover, 0, 107, 227)) !important;
+}
+.cat-link-info:active,
+.cat-text-info-hover:active {
+  color: rgb(var(--cat-success-text-active, 0, 96, 223)) !important;
+}
+
 .cat-bg-success {
   background-color: rgb(var(--cat-success-bg, 0, 132, 88)) !important;
   color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-success-hover {
@@ -158,6 +233,10 @@
 .cat-bg-success-hover:hover {
   background-color: rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;
   color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-success,
@@ -181,6 +260,10 @@
 .cat-bg-warning {
   background-color: rgb(var(--cat-warning-bg, 255, 206, 128)) !important;
   color: rgb(var(--cat-warning-fill, 0, 0, 0)) !important;
+  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-warning-hover {
@@ -189,6 +272,10 @@
 .cat-bg-warning-hover:hover {
   background-color: rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;
   color: rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;
+  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-warning,
@@ -212,6 +299,10 @@
 .cat-bg-danger {
   background-color: rgb(var(--cat-danger-bg, 217, 52, 13)) !important;
   color: rgb(var(--cat-danger-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-danger-hover {
@@ -220,6 +311,10 @@
 .cat-bg-danger-hover:hover {
   background-color: rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;
   color: rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-danger,
@@ -244,10 +339,22 @@
   color: rgb(var(--cat-primary-text, 0, 129, 148)) !important;
 }
 
+.cat-text-active {
+  color: rgb(var(--cat-primary-text, 0, 129, 148)) !important;
+}
+
 .cat-muted {
   color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;
 }
 
+.cat-text-muted {
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;
+}
+
+.cat-bg-muted {
+  background-color: #f2f4f7 !important;
+}
+
 .cat-text-reset {
   color: inherit !important;
 }

package/dist/collection/components/cat-toggle/cat-toggle.js

@@ -24,6 +24,7 @@ export class CatToggle {
     this.name = undefined;
     this.required = false;
     this.value = undefined;
+    this.noValue = undefined;
     this.resolvedValue = null;
     this.hint = undefined;
     this.labelLeft = false;
@@ -77,7 +78,7 @@ export class CatToggle {
     this.catBlur.emit(event);
   }
   updateResolved() {
-    this.resolvedValue = this.value == null ? this.checked : this.checked ? this.value : null;
+    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
   }
   static get is() { return "cat-toggle"; }
   static get encapsulation() { return "shadow"; }
@@ -218,35 +219,52 @@ export class CatToggle {
         "defaultValue": "false"
       },
       "value": {
-        "type": "string",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The value of the toggle."
+          "text": "The value of the checked toggle."
         },
         "attribute": "value",
         "reflect": false
       },
+      "noValue": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the unchecked toggle."
+        },
+        "attribute": "no-value",
+        "reflect": false
+      },
       "resolvedValue": {
         "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "string | boolean | null",
-          "resolved": "boolean | null | string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The resolved value of the toggle, based on the checked state and value."
+          "text": "The resolved value of the toggle, based on the checked state, value and noValue."
         },
         "attribute": "resolved-value",
         "reflect": false,
@@ -322,8 +340,8 @@ export class CatToggle {
           "text": "Emitted when the checked status of the toggle is changed."
         },
         "complexType": {
-          "original": "boolean | string | null",
-          "resolved": "boolean | null | string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         }
       }, {

package/dist/collection/components/cat-toggle/cat-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;GAQG;AAMH,MAAM,OAAO,SAAS;;IACH,QAAG,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;2BAS3B,KAAK;0BAEN,KAAK;mBAKI,KAAK;oBAKrB,KAAK;;iBAUR,EAAE;uBAKI,KAAK;;oBAUR,KAAK;;yBAU0C,IAAI;;qBAUlD,KAAK;;;EAjEzB,IAAY,EAAE;IACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;EACrC,CAAC;EAqFD,iBAAiB;IACf,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxC,GAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;EACH,CAAC;EAED;;;;;;KAMG;EAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;IAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;EACpB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aACE,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;QAEpG,gBACM,IAAI,CAAC,gBAAgB,EACzB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,sBACZ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GAC9D;QACF,YAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ;QAC1C,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAC9D,CACD;MACP,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;QAChE,WAAK,KAAK,EAAC,oBAAoB,GAAO;QACtC,EAAC,WAAW,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CACxG,CACP,CACI,CACR,CAAC;EACJ,CAAC;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;EAC9C,CAAC;EAEO,OAAO;IACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;EAC1C,CAAC;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;EAC5F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle.\n   */\n  @Prop() value?: string;\n\n  /**\n   * The resolved value of the toggle, based on the checked state and value.\n   */\n  @Prop({ mutable: true }) resolvedValue: string | boolean | null = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string | null>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.value == null ? this.checked : this.checked ? this.value : null;\n  }\n}\n"]}
+{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the toggle, based on the checked state, value and noValue.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"]}

package/dist/collection/scss/core/_form.scss

@@ -12,3 +12,9 @@
     margin-bottom: 0.5rem;
   }
 }
+
+.cat-label {
+  @include cat-body('m');
+  display: block;
+  margin-bottom: 0.5rem;
+}