@umbraco-ui/uui-toggle 0.0.19 → 0.2.0

package/README.md

@@ -4,6 +4,10 @@
 
 Umbraco style toggle component.
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-toggle)
+
 ## Installation
 
 ## ES imports

package/custom-elements.json

@@ -51,18 +51,20 @@
         {
           "name": "required-message",
           "description": "Required validation message.",
-          "type": "boolean"
+          "type": "string",
+          "default": "\"This field is required\""
         },
         {
           "name": "error",
           "description": "Apply custom error on this input.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "error-message",
           "description": "Custom error message.",
-          "type": "boolean"
+          "type": "string",
+          "default": "\"This field is invalid\""
         },
         {
           "name": "label",
@@ -135,20 +137,26 @@
           "name": "requiredMessage",
           "attribute": "required-message",
           "description": "Required validation message.",
-          "type": "boolean"
+          "type": "string",
+          "default": "\"This field is required\""
         },
         {
           "name": "error",
           "attribute": "error",
           "description": "Apply custom error on this input.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "errorMessage",
           "attribute": "error-message",
           "description": "Custom error message.",
-          "type": "boolean"
+          "type": "string",
+          "default": "\"This field is invalid\""
+        },
+        {
+          "name": "validity",
+          "type": "ValidityState"
         },
         {
           "name": "validationMessage"
@@ -173,7 +181,7 @@
       "slots": [
         {
           "name": "",
-          "description": "to overwrite displayed label content"
+          "description": "Override the default label"
         }
       ],
       "cssProperties": [

package/lib/index.js

@@ -56,7 +56,7 @@ UUIToggleElement.styles = [
           var(--uui-toggle-border-color, var(--uui-interface-border,#c4c4c4));
         font-size: calc(var(--uui-toggle-size) * 0.6);
       }
-      label:hover input:not([disabled]) + #slider {
+      label:hover input:not([disabled]) ~ #slider {
         border-color: var(
           --uui-toggle-border-color-hover,
           var(--uui-interface-border-hover,rgb(179, 179, 179))
@@ -76,13 +76,13 @@ UUIToggleElement.styles = [
           var(--uui-interface-surface-alt-focus,#d8d7d9)
         );
       }
-      input:checked + #slider {
+      input:checked ~ #slider {
         background-color: var(--uui-interface-select,#3544b1);
       }
-      label:hover input:checked:not([disabled]) + #slider {
+      label:hover input:checked:not([disabled]) ~ #slider {
         background-color: var(--uui-interface-select-hover,rgb(70, 86, 200));
       }
-      label:focus input:checked + #slider {
+      label:focus input:checked ~ #slider {
         background-color: var(--uui-interface-select-focus,#3544b1);
       }
 
@@ -107,7 +107,7 @@ UUIToggleElement.styles = [
         right: calc(var(--uui-toggle-size) * 0.5);
         fill: var(--uui-interface-contrast,#060606);
       }
-      input:checked + #slider #icon-check {
+      input:checked ~ #slider #icon-check {
         fill: var(--uui-interface-select-contrast,#fefefe);
       }
 
@@ -124,12 +124,12 @@ UUIToggleElement.styles = [
           background-color 120ms;
       }
 
-      input:checked + #slider::after {
+      input:checked ~ #slider::after {
         left: calc(100% - 2px);
         transform: translateX(-100%);
       }
 
-      input:focus + #slider {
+      input:focus ~ #slider {
         outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
           var(--uui-interface-outline,#3879ff);
       }
@@ -142,7 +142,7 @@ UUIToggleElement.styles = [
       :host([disabled]) #slider {
         background-color: var(--uui-interface-surface-alt-disabled,rgb(204, 204, 204));
       }
-      :host([disabled]) input:checked + #slider {
+      :host([disabled]) input:checked ~ #slider {
         background-color: var(--uui-interface-select-disabled,rgb(87, 87, 87));
       }
       :host([disabled]) #slider::after {
@@ -154,7 +154,7 @@ UUIToggleElement.styles = [
       :host([disabled]) label:active #slider {
         animation: ${UUIHorizontalShakeAnimationValue};
       }
-      :host([disabled]) input:checked + #slider #icon-check {
+      :host([disabled]) input:checked #slider #icon-check {
         fill: var(--uui-interface-select-contrast-disabled,rgb(228, 228, 228));
       }
 

package/lib/uui-toggle.element.d.ts

@@ -3,7 +3,6 @@ import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';
  *  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.
  *  @element uui-toggle
  *  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action
- *  @slot to overwrite displayed label content
  *  @cssprop --uui-toggle-size - Define the toggle size.
  *  @cssprop --uui-toggle-switch-width - Define the slider width.
  *  @cssprop --uui-toggle-background-color - Set the toggle background color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-toggle",
-  "version": "0.0.19",
+  "version": "0.2.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17",
-    "@umbraco-ui/uui-boolean-input": "0.0.3"
+    "@umbraco-ui/uui-base": "0.2.0",
+    "@umbraco-ui/uui-boolean-input": "0.2.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -42,5 +42,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-toggle",
-  "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8"
+  "gitHead": "5494b55e03c9fb3ba8f160e693d3ce59c02d21cd"
 }