node-red-contrib-homekit-bridged 2.0.0-dev.7 → 2.0.0-dev.9

package/build/lib/Storage.js

@@ -136,18 +136,15 @@ class Storage {
   static loadCustomCharacteristics() {
     return Storage.load(import_StorageType.StorageType.CUSTOM_CHARACTERISTICS);
   }
-  static loadService(key) {
-    return new Promise((resolve, reject) => {
-      Storage.load(import_StorageType.StorageType.SERVICE, key).then((value) => {
-        if (value === void 0) {
-          reject("Service data not exists");
-        } else if ("primaryService" in value) {
-          resolve(value);
-        } else {
-          reject("Service data corrupted");
-        }
-      });
-    });
+  static async loadService(key) {
+    const value = await Storage.load(import_StorageType.StorageType.SERVICE, key);
+    if (value === void 0) {
+      throw "Service data not exists";
+    }
+    if (typeof value === "object" && value !== null && "primaryService" in value) {
+      return value;
+    }
+    throw "Service data corrupted";
   }
   static loadAccessory(key) {
     return Storage.load(import_StorageType.StorageType.ACCESSORY, key);

package/build/lib/utils/ServiceUtils.js

@@ -380,7 +380,6 @@ const buildServiceUtils = (node) => {
       node.removeListener("input", node.handleWaitForSetup);
       resolve(newConfig);
     } else {
-      node.removeListener("input", node.handleWaitForSetup);
       log.error(
         'Invalid message (required {"payload":{"nrchkb":{"setup":{}}}})'
       );

package/build/lib/utils/ServiceUtils2.js

@@ -47,7 +47,13 @@ const describeContext = (context) => {
   return keys.length > 0 ? `Object(${keys.slice(0, 5).join(",")}${keys.length > 5 ? ",..." : ""})` : "Object";
 };
 const describeSupported = (supported) => Array.from(supported).join("', '");
-const isPluginEntry = (value) => typeof value === "object" && value !== null && typeof value.id === "string" && value.id.trim().length > 0;
+const isPluginEntry = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const id = value.id;
+  return typeof id === "string" && id.trim().length > 0;
+};
 const parsePluginEntries = (value, log) => {
   if (!value) {
     return [];
@@ -375,7 +381,7 @@ const buildServiceUtils2 = (node) => {
         config: serviceInformation.config
       }
     });
-    let pluginService;
+    let pluginService = void 0;
     const pluginSlots = [
       serviceInformation.config.plugin1,
       serviceInformation.config.plugin2,
@@ -506,7 +512,6 @@ const buildServiceUtils2 = (node) => {
       node.removeListener("input", node.handleWaitForSetup);
       resolve(newConfig);
     } else {
-      node.removeListener("input", node.handleWaitForSetup);
       log.error(
         'Invalid message (required {"payload":{"nrchkb":{"setup":{}}}})'
       );

package/build/nodes/bridge.html

@@ -9,7 +9,7 @@
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-pinCode"><i class="fa fa-key"></i> Pin Code</label>
-                    <input type="text" id="node-config-input-pinCode" placeholder="xxxx-xxxx">
+                    <input type="text" id="node-config-input-pinCode" placeholder="xxxx-xxxx" inputmode="numeric" autocomplete="off" spellcheck="false">
                 </div>
                 <details class="nrchkb-section">
                     <summary><i class="fa fa-qrcode"></i> <span data-i18n="node-red-contrib-homekit-bridged/qr.sectionTitle">Pairing QR Code</span></summary>
@@ -31,7 +31,7 @@
             <div class="nrchkb-section-body">
                 <div class="form-row">
                     <label for="node-config-input-port"><i class="fa fa-plug"></i> Port</label>
-                    <input type="text" id="node-config-input-port" placeholder="Leave blank to auto assign">
+                    <input type="text" id="node-config-input-port" placeholder="Leave blank to auto assign" inputmode="numeric" autocomplete="off" spellcheck="false">
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-advertiser"><i class="fa fa-bullhorn"></i> Advertiser</label>
@@ -44,7 +44,7 @@
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-bind"><i class="fa fa-sitemap"></i> Bind</label>
-                    <input type="text" id="node-config-input-bind" placeholder="::">
+                    <input type="text" id="node-config-input-bind" placeholder="::" autocomplete="off" spellcheck="false">
                     <input type="hidden" id="node-config-input-bindType">
                 </div>
             </div>
@@ -298,6 +298,26 @@ Advertiser guide:
             applyDefaultNodeDocumentation(this, 'homekit-bridge')
         },
         oneditprepare: function () {
+            const prefersReducedMotion = function () {
+                return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+            }
+            const showEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).show()
+                    return
+                }
+
+                section.stop(true, true).fadeIn('fast')
+            }
+            const hideEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).hide()
+                    return
+                }
+
+                section.stop(true, true).fadeOut('fast')
+            }
+
             if (!validatePinCode(this.pinCode)) {
                 this.pinCode = generatePinCode()
                 $('#node-config-input-pinCode').val(this.pinCode)
@@ -321,9 +341,9 @@ Advertiser guide:
                 .change(function () {
                     if (this.checked) {
                         mdnsConfigurationSection.prop('open', true)
-                        mdnsConfiguration.fadeIn('fast')
+                        showEditorSection(mdnsConfiguration)
                     } else {
-                        mdnsConfiguration.fadeOut('fast')
+                        hideEditorSection(mdnsConfiguration)
                     }
                 })
                 .change()

package/build/nodes/nrchkb.html

@@ -364,12 +364,23 @@
         line-height: 16px;
     }
 
+    .nrchkb-sidebar-pairing label.nrchkb-sidebar-setting.nrchkb-checkbox-label {
+        display: inline-flex !important;
+        gap: 8px;
+        line-height: 1.35;
+    }
+
     .nrchkb-sidebar-pairing label.nrchkb-sidebar-setting input {
         width: 16px;
         height: 16px;
         margin: 0 !important;
     }
 
+    .nrchkb-sidebar-pairing label.nrchkb-sidebar-setting.nrchkb-checkbox-label input[type="checkbox"] {
+        width: 36px;
+        height: 22px;
+    }
+
     .nrchkb-sidebar-pairing label.nrchkb-sidebar-setting span {
         display: block;
         min-width: 0;
@@ -615,54 +626,34 @@
         background: var(--nrchkb-accent);
     }
 
-    @container (max-width: 520px) {
-        .nrchkb-editor .form-row {
-            align-items: stretch;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .nrchkb-editor .form-row > label:first-child {
-            flex: 0 0 auto;
-            max-width: 100%;
-            min-width: 0;
-            width: auto;
-        }
-
-        .nrchkb-editor .form-row > input[type="text"],
-        .nrchkb-editor .form-row > input[type="number"],
-        .nrchkb-editor .form-row > input:not([type]),
-        .nrchkb-editor .form-row > select,
-        .nrchkb-editor .form-row > .red-ui-typedInput-container,
-        .nrchkb-editor .form-row > div[style*="inline-flex"] {
-            flex: 0 0 auto;
-            width: 100% !important;
+    @supports not (color: color-mix(in srgb, #000 50%, #fff)) {
+        .nrchkb-editor {
+            --nrchkb-toggle-off: var(--red-ui-tertiary-background, #f6f6f6);
+            --nrchkb-toggle-border: var(--red-ui-secondary-border-color, #d8d8d8);
         }
 
-        .nrchkb-editor .nrchkb-checkbox-row {
-            display: block;
+        .nrchkb-editor .nrchkb-section,
+        .nrchkb-editor .nrchkb-nested-panel,
+        .nrchkb-editor .nrchkb-section > summary,
+        .nrchkb-editor .nrchkb-advertiser-recommendation,
+        .nrchkb-help .nrchkb-advertiser-dynamic {
+            background: var(--red-ui-secondary-background, #fff);
         }
 
-        .nrchkb-editor .nrchkb-characteristic-row {
-            align-items: stretch;
-            flex-direction: column;
-            gap: 4px;
+        .nrchkb-editor input[type="checkbox"]:checked {
+            border-color: #1f8f3d;
         }
 
-        .nrchkb-editor .nrchkb-characteristic-label {
-            flex: 0 0 auto;
-            max-width: 100%;
-            min-width: 0;
-            padding-left: 0;
+        .nrchkb-editor .nrchkb-checkbox-label i {
+            color: var(--nrchkb-muted-text);
         }
 
-        .nrchkb-editor .nrchkb-pairing-card {
-            align-items: flex-start;
-            flex-direction: column;
+        .nrchkb-editor .nrchkb-checkbox-label input[type="checkbox"]:checked + span i {
+            color: #1f6f35;
         }
     }
 
-    @media (max-width: 520px) {
+    @container (max-width: 520px) {
         .nrchkb-editor .form-row {
             align-items: stretch;
             flex-direction: column;
@@ -709,6 +700,55 @@
         }
     }
 
+    @supports not (container-type: inline-size) {
+        @media (max-width: 520px) {
+            .nrchkb-editor .form-row {
+                align-items: stretch;
+                flex-direction: column;
+                gap: 4px;
+            }
+
+            .nrchkb-editor .form-row > label:first-child {
+                flex: 0 0 auto;
+                max-width: 100%;
+                min-width: 0;
+                width: auto;
+            }
+
+            .nrchkb-editor .form-row > input[type="text"],
+            .nrchkb-editor .form-row > input[type="number"],
+            .nrchkb-editor .form-row > input:not([type]),
+            .nrchkb-editor .form-row > select,
+            .nrchkb-editor .form-row > .red-ui-typedInput-container,
+            .nrchkb-editor .form-row > div[style*="inline-flex"] {
+                flex: 0 0 auto;
+                width: 100% !important;
+            }
+
+            .nrchkb-editor .nrchkb-checkbox-row {
+                display: block;
+            }
+
+            .nrchkb-editor .nrchkb-characteristic-row {
+                align-items: stretch;
+                flex-direction: column;
+                gap: 4px;
+            }
+
+            .nrchkb-editor .nrchkb-characteristic-label {
+                flex: 0 0 auto;
+                max-width: 100%;
+                min-width: 0;
+                padding-left: 0;
+            }
+
+            .nrchkb-editor .nrchkb-pairing-card {
+                align-items: flex-start;
+                flex-direction: column;
+            }
+        }
+    }
+
     .nrchkb-editor .alert {
         position: relative;
         padding: .75rem 1.25rem;
@@ -734,17 +774,7 @@
 </style>
 
 <script type="text/javascript">
-    const initNRCHKBConfigNode = function () {
-        //NRCHKB Custom Characteristics
-        $.ajax({
-            url: 'nrchkb/config',
-            dataType: 'json',
-            async: false,
-            success: function (data) {
-                nrchkbConfig = data
-            },
-        })
-
+    const registerNRCHKBConfigNode = function () {
         RED.nodes.registerType('nrchkb', {
             category: 'Apple HomeKit',
             icon: 'nrchkb.png',
@@ -788,6 +818,10 @@
                         const row1 = $('<div/>', {class: 'nrchkb-characteristic-row'}).appendTo(fragment)
                         const row2 = $('<div/>', {class: 'nrchkb-characteristic-row'}).appendTo(fragment)
                         const row3 = $('<div/>', {class: 'nrchkb-characteristic-fields'}).appendTo(fragment)
+                        const fieldIdPrefix = 'node-input-customCharacteristic-' + i + '-'
+                        const createFieldId = function (name) {
+                            return fieldIdPrefix + name
+                        }
                         const setIconLabelText = function (target, iconClass, text) {
                             target.empty()
                             $('<i/>', {class: 'fa ' + iconClass}).appendTo(target)
@@ -799,23 +833,27 @@
                             return label
                         }
 
-                        const uuidLabel = $('<div/>', {
+                        const uuidFieldId = createFieldId('uuid')
+                        const uuidLabel = $('<label/>', {
                             class: 'nrchkb-characteristic-label',
+                            for: uuidFieldId,
                             required: 'required'
                         })
                             .appendTo(row1)
                         setIconLabelText(uuidLabel, 'fa-key', 'UUID')
-                        $('<input/>', {class: 'property-uuid', type: 'text'})
+                        $('<input/>', {class: 'property-uuid', id: uuidFieldId, type: 'text'})
                             .val(UUID ? UUID : uuidv4)
                             .appendTo(row1)
 
-                        const nameLabel = $('<div/>', {
+                        const nameFieldId = createFieldId('name')
+                        const nameLabel = $('<label/>', {
                             class: 'nrchkb-characteristic-label',
+                            for: nameFieldId,
                             required: 'required'
                         })
                             .appendTo(row2)
                         setIconLabelText(nameLabel, 'fa-tag', 'Name')
-                        $('<input/>', {class: 'property-name', type: 'text'})
+                        $('<input/>', {class: 'property-name', id: nameFieldId, type: 'text'})
                             .val(name)
                             .appendTo(row2)
 
@@ -829,12 +867,14 @@
                         const row3_properties = $('<div/>', {class: 'properties'}).appendTo(row3_properties_accordion)
 
                         const formatRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const formatFieldId = createFieldId('format')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-format'
+                            for: formatFieldId
                         }, 'fa-code', 'Format *').appendTo(formatRow)
                         const formatInput = $('<select/>', {
                             class: 'property-format',
+                            id: formatFieldId,
                             required: 'required'
                         }).appendTo(formatRow)
                         $('<option/>').val(undefined).text('Choose...').appendTo(formatInput)
@@ -853,11 +893,12 @@
                         formatInput.val(props.format)
 
                         const unitRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const unitFieldId = createFieldId('unit')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-unit'
+                            for: unitFieldId
                         }, 'fa-balance-scale', 'Unit').appendTo(unitRow)
-                        const unitSelect = $('<select/>', {class: 'property-unit'}).appendTo(unitRow)
+                        const unitSelect = $('<select/>', {class: 'property-unit', id: unitFieldId}).appendTo(unitRow)
                         $('<option/>').val(undefined).text('Choose...').appendTo(unitSelect)
                         $('<option/>').val('celsius').text('CELSIUS').appendTo(unitSelect)
                         $('<option/>').val('percentage').text('PERCENTAGE').appendTo(unitSelect)
@@ -867,12 +908,14 @@
                         unitSelect.val(props.unit)
 
                         const permsRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const permsFieldId = createFieldId('perms')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-perms'
+                            for: permsFieldId
                         }, 'fa-lock', 'Permissions').appendTo(permsRow)
                         const permsSelect = $('<select/>', {
                             class: 'property-perms',
+                            id: permsFieldId,
                             multiple: 'multiple'
                         }).appendTo(permsRow)
                         $('<option/>').val('pr').text('PAIRED_READ / READ').appendTo(permsSelect)
@@ -885,93 +928,113 @@
                         permsSelect.val(props.perms)
 
                         const evRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const evFieldId = createFieldId('ev')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-ev'
+                            for: evFieldId
                         }, 'fa-bell-o', 'Event Notifications').appendTo(evRow)
                         $('<input/>', {
                             class: 'property-ev',
+                            id: evFieldId,
                             type: 'checkbox',
                             checked: props.ev
                         }).appendTo(evRow)
 
                         const descriptionRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const descriptionFieldId = createFieldId('description')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-description'
+                            for: descriptionFieldId
                         }, 'fa-align-left', 'Description').appendTo(descriptionRow)
                         $('<input/>', {
                             class: 'property-description',
+                            id: descriptionFieldId,
                             type: 'text'
                         }).appendTo(descriptionRow).val(props.description)
 
                         const minValueRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const minValueFieldId = createFieldId('minValue')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-minValue'
+                            for: minValueFieldId
                         }, 'fa-sort-numeric-asc', 'Minimum Value').appendTo(minValueRow)
                         $('<input/>', {
                             class: 'property-minValue',
+                            id: minValueFieldId,
                             type: 'number'
                         }).appendTo(minValueRow).val(props.minValue)
 
                         const maxValueRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const maxValueFieldId = createFieldId('maxValue')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-maxValue'
+                            for: maxValueFieldId
                         }, 'fa-sort-numeric-desc', 'Maximum Value').appendTo(maxValueRow)
                         $('<input/>', {
                             class: 'property-maxValue',
+                            id: maxValueFieldId,
                             type: 'number'
                         }).appendTo(maxValueRow).val(props.maxValue)
 
                         const minStepRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const minStepFieldId = createFieldId('minStep')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-minStep'
+                            for: minStepFieldId
                         }, 'fa-step-forward', 'Minimum Step').appendTo(minStepRow)
                         $('<input/>', {
                             class: 'property-minStep',
+                            id: minStepFieldId,
                             type: 'number'
                         }).appendTo(minStepRow).val(props.minStep)
 
                         const maxLenRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const maxLenFieldId = createFieldId('maxLen')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-maxLen'
+                            for: maxLenFieldId
                         }, 'fa-text-width', 'Maximum Length').appendTo(maxLenRow)
                         $('<input/>', {
                             class: 'property-maxLen',
+                            id: maxLenFieldId,
                             type: 'number'
                         }).appendTo(maxLenRow).val(props.maxLen)
 
                         const maxDataLenRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const maxDataLenFieldId = createFieldId('maxDataLen')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-maxDataLen'
+                            for: maxDataLenFieldId
                         }, 'fa-database', 'Maximum Data Length').appendTo(maxDataLenRow)
                         $('<input/>', {
                             class: 'property-maxDataLen',
+                            id: maxDataLenFieldId,
                             type: 'number'
                         }).appendTo(maxDataLenRow).val(props.maxDataLen)
 
                         const validValuesRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const validValuesFieldId = createFieldId('validValues')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-validValues'
+                            for: validValuesFieldId
                         }, 'fa-check-square-o', 'Valid Values').appendTo(validValuesRow)
                         $('<input/>', {
                             class: 'property-validValues',
+                            id: validValuesFieldId,
                             type: 'text'
                         }).appendTo(validValuesRow).val(props.validValues)
 
                         const validValueRangesRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const validValueRangesFieldId = createFieldId('validValueRanges')
+                        const validValueRangesLabelId = validValueRangesFieldId + '-label'
                         const validValueRangesLabel = createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label property-validValueRanges-label',
-                            htmlFor: 'property-validValueRanges'
+                            id: validValueRangesLabelId,
                         }, 'fa-sliders', 'Valid Value Ranges').appendTo(validValueRangesRow)
                         const validValueRangesSlider = $('<div/>', {
                             class: 'property-validValueRanges',
+                            id: validValueRangesFieldId,
+                            'aria-labelledby': validValueRangesLabelId,
                             type: 'text'
                         }).appendTo(validValueRangesRow)
 
@@ -984,15 +1047,19 @@
                                 setIconLabelText(validValueRangesLabel, 'fa-sliders', 'Valid Value Ranges: [' + ui.values[0] + ', ' + ui.values[1] + ']')
                             }
                         })
+                        validValueRangesSlider.find('.ui-slider-handle')
+                            .attr('aria-labelledby', validValueRangesLabelId)
                         setIconLabelText(validValueRangesLabel, 'fa-sliders', 'Valid Value Ranges: [' + validValueRangesSlider.slider('values', 0) + ', ' + validValueRangesSlider.slider('values', 1) + ']')
 
                         const adminOnlyAccessRow = $('<div/>', {class: 'form-row'}).appendTo(row3_properties)
+                        const adminOnlyAccessFieldId = createFieldId('adminOnlyAccess')
                         createPropertyLabel({
                             class: 'nrchkb-characteristic-property-label',
-                            htmlFor: 'property-adminOnlyAccess'
+                            for: adminOnlyAccessFieldId
                         }, 'fa-user-secret', 'Admin Only Access').appendTo(adminOnlyAccessRow)
                         const adminOnlyAccessSelect = $('<select/>', {
                             class: 'property-adminOnlyAccess',
+                            id: adminOnlyAccessFieldId,
                             multiple: 'multiple'
                         }).appendTo(adminOnlyAccessRow)
                         $('<option/>').val(0).text('READ').appendTo(adminOnlyAccessSelect)
@@ -1012,8 +1079,12 @@
                     sortable: true
                 })
 
-                for (let i = 0; i < nrchkbConfig.customCharacteristics.length; i++) {
-                    const customCharacteristic = nrchkbConfig.customCharacteristics[i]
+                const customCharacteristics = Array.isArray(nrchkbConfig.customCharacteristics)
+                    ? nrchkbConfig.customCharacteristics
+                    : []
+
+                for (let i = 0; i < customCharacteristics.length; i++) {
+                    const customCharacteristic = customCharacteristics[i]
                     $('#node-input-customCharacteristics-container').editableList('addItem', customCharacteristic)
                 }
             },
@@ -1030,6 +1101,25 @@
             }
         })
     }
+
+    const initNRCHKBConfigNode = function () {
+        //NRCHKB Custom Characteristics
+        $.ajax({
+            url: 'nrchkb/config',
+            dataType: 'json',
+        })
+            .done(function (data) {
+                nrchkbConfig = data || {}
+                if (!Array.isArray(nrchkbConfig.customCharacteristics)) {
+                    nrchkbConfig.customCharacteristics = []
+                }
+            })
+            .fail(function () {
+                nrchkbConfig = {customCharacteristics: []}
+                RED.notify('Unable to load NRCHKB custom characteristics.', 'warning')
+            })
+            .always(registerNRCHKBConfigNode)
+    }
 </script>
 
 <script type="text/javascript">
@@ -1064,12 +1154,14 @@
     $.ajax({
         url: 'nrchkb/info',
         dataType: 'json',
-        async: false,
-        success: function (data) {
-            nrchkbVersion = data.version
-            initNRCHKBConfigNode()
-        },
     })
+        .done(function (data) {
+            nrchkbVersion = data.version
+        })
+        .fail(function () {
+            RED.notify('Unable to load NRCHKB version information.', 'warning')
+        })
+        .always(initNRCHKBConfigNode)
 
     const renderAdvertiserRecommendation = function (recommendation) {
         if (!recommendation || !recommendation.recommended) {
@@ -1436,12 +1528,35 @@
         const settingsStorageKey = 'nrchkb.pairingQR.settings'
         let initialized = false
         let refreshTimer
+        let refreshRequestTimer
         let sidebarContent
         let sidebarList
         let sidebarStatus
         let settings = {
             autoShowWhenPairingAvailable: true,
         }
+        const prefersReducedMotion = function () {
+            return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        }
+        const slideDownElement = function (element, duration) {
+            if (prefersReducedMotion()) {
+                element.stop(true, true).show()
+                return
+            }
+
+            element.stop(true, true).slideDown(duration)
+        }
+        const slideUpElement = function (element, duration, onComplete) {
+            if (prefersReducedMotion()) {
+                element.stop(true, true).hide()
+                if (onComplete) {
+                    onComplete()
+                }
+                return
+            }
+
+            element.stop(true, true).slideUp(duration, onComplete)
+        }
         const text = function (key, fallback) {
             const keys = [
                 'node-red-contrib-homekit-bridged/' + key,
@@ -1705,7 +1820,7 @@
             }
 
             card.data('nrchkbRemoving', true)
-            card.stop(true, true).slideUp(180, function () {
+            slideUpElement(card, 180, function () {
                 card.remove()
                 if (onComplete) {
                     onComplete()
@@ -1779,7 +1894,7 @@
                             .attr('data-signature', signature)
                             .hide()
                         sidebarList.append(newCard)
-                        newCard.slideDown(180)
+                        slideDownElement(newCard, 180)
                     })
                 }
 
@@ -1789,6 +1904,13 @@
             })
         }
 
+        const requestRefreshSidebar = function (delay, options) {
+            clearTimeout(refreshRequestTimer)
+            refreshRequestTimer = setTimeout(function () {
+                refreshSidebar(options)
+            }, delay)
+        }
+
         const registerSidebar = function () {
             sidebarContent = $('<div/>', {class: 'nrchkb-editor nrchkb-sidebar-pairing'})
             const section = $('<details/>', {class: 'nrchkb-section', open: true}).appendTo(sidebarContent)
@@ -1799,7 +1921,7 @@
                 .appendTo(section)
             const sectionBody = $('<div/>', {class: 'nrchkb-section-body'}).appendTo(section)
             const autoShowLabel = $('<label/>', {
-                class: 'nrchkb-sidebar-setting nrchkb-sidebar-pairing-control',
+                class: 'nrchkb-checkbox-label nrchkb-sidebar-setting nrchkb-sidebar-pairing-control',
             }).appendTo(sectionBody)
             $('<input/>', {
                 checked: settings.autoShowWhenPairingAvailable,
@@ -1810,9 +1932,11 @@
                     saveSettings()
                 })
                 .appendTo(autoShowLabel)
-            $('<span/>', {
-                text: text('qr.autoShowWhenPairingAvailable', 'Auto show if something needs pairing'),
-            }).appendTo(autoShowLabel)
+            $('<span/>')
+                .append($('<i/>', {class: 'fa fa-eye'}))
+                .append(' ')
+                .append(text('qr.autoShowWhenPairingAvailable', 'Auto show if something needs pairing'))
+                .appendTo(autoShowLabel)
             sidebarStatus = $('<p/>', {
                 class: 'nrchkb-sidebar-pairing-status',
                 'aria-live': 'polite',
@@ -1910,14 +2034,12 @@
 
             if (RED.events) {
                 RED.events.on('deploy', function () {
-                    setTimeout(function () {
-                        refreshSidebar({show: true})
-                    }, 1500)
+                    requestRefreshSidebar(1500, {show: true})
                 })
 
                 ;['flows:loaded', 'nodes:add', 'nodes:change', 'nodes:remove'].forEach(function (eventName) {
                     RED.events.on(eventName, function () {
-                        setTimeout(refreshSidebar, 250)
+                        requestRefreshSidebar(250)
                     })
                 })
             }
@@ -1925,6 +2047,7 @@
             refreshTimer = setInterval(refreshSidebar, 10000)
             window.addEventListener('beforeunload', function () {
                 clearInterval(refreshTimer)
+                clearTimeout(refreshRequestTimer)
             })
             setTimeout(function () {
                 refreshSidebar({show: true})

package/build/nodes/plugin-instance.html

@@ -268,6 +268,21 @@ Generic NRCHKB plugin instance used by service nodes to track plugin dependencie
         return 'node-config-input-plugin-' + (field.path || 'field').replace(/[^a-zA-Z0-9_-]/g, '-')
     }
 
+    function appendFieldHelp(row, input, fieldId, field) {
+        const helpText = field.description || field.placeholder || ''
+
+        if (!helpText) {
+            return
+        }
+
+        const helpId = fieldId + '-help'
+        input.attr('aria-describedby', helpId)
+        $('<div/>', {
+            id: helpId,
+            class: 'nrchkb-plugin-instance-help'
+        }).text(helpText).appendTo(row)
+    }
+
     function renderPluginEditor(plugin, config) {
         const editorContainer = $('#node-config-input-plugin-instance-editor').empty()
 
@@ -377,6 +392,7 @@ Generic NRCHKB plugin instance used by service nodes to track plugin dependencie
                 .appendTo(label)
             input.prop('checked', !!value)
             attachFieldMetadata(input, field)
+            appendFieldHelp(row, input, fieldId, field)
             return
         }
 
@@ -401,14 +417,6 @@ Generic NRCHKB plugin instance used by service nodes to track plugin dependencie
                 rows: 4
             }).appendTo(row)
             input.val(value === undefined ? '' : value)
-            if (field.placeholder) {
-                const helpId = fieldId + '-help'
-                input.attr('aria-describedby', helpId)
-                $('<div/>', {
-                    id: helpId,
-                    class: 'nrchkb-plugin-instance-help'
-                }).text(field.placeholder).appendTo(row)
-            }
         } else {
             input = $('<input/>', {
                 type: field.type === 'number' ? 'number' : field.type === 'password' ? 'password' : 'text',
@@ -439,6 +447,8 @@ Generic NRCHKB plugin instance used by service nodes to track plugin dependencie
             input.attr('data-plugin-dynamic-select', 'true')
             input.data('pluginDynamicValue', value === undefined ? '' : value)
         }
+
+        appendFieldHelp(row, input, fieldId, field)
     }
 
     function attachFieldMetadata(input, field) {

package/build/nodes/service.html

@@ -543,6 +543,25 @@ Send a `msg.payload` object whose keys are HomeKit characteristic names.
         oneditprepare: function () {
             let node = this
             let isParentToggle = $('#node-config-input-isParent')
+            const prefersReducedMotion = function () {
+                return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+            }
+            const showEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).show()
+                    return
+                }
+
+                section.stop(true, true).fadeIn('fast')
+            }
+            const hideEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).hide()
+                    return
+                }
+
+                section.stop(true, true).fadeOut('fast')
+            }
 
             if (node.isParent === false) {
                 isParentToggle.val('false')
@@ -703,11 +722,11 @@ Send a `msg.payload` object whose keys are HomeKit characteristic names.
             isParentToggle
                 .change(function () {
                     if (isParentToggle.val() === 'true') {
-                        isLinkedDiv.fadeOut('fast')
-                        isParentDiv.fadeIn('fast')
+                        hideEditorSection(isLinkedDiv)
+                        showEditorSection(isParentDiv)
                     } else {
-                        isParentDiv.fadeOut('fast')
-                        isLinkedDiv.fadeIn('fast')
+                        hideEditorSection(isParentDiv)
+                        showEditorSection(isLinkedDiv)
                         selectHostType.val("_ADD_")
                     }
                 })
@@ -778,10 +797,10 @@ Send a `msg.payload` object whose keys are HomeKit characteristic names.
                 .change(function () {
                     if (this.value === 'CameraControl') {
                         cameraConfiguration.prop('open', true)
-                        cameraConfiguration.fadeIn('fast')
+                        showEditorSection(cameraConfiguration)
                         node.outputs = 3
                     } else {
-                        cameraConfiguration.fadeOut('fast')
+                        hideEditorSection(cameraConfiguration)
                         node.outputs = 2
                     }
                 })
@@ -791,9 +810,9 @@ Send a `msg.payload` object whose keys are HomeKit characteristic names.
                 .change(function () {
                     if (this.value === 'Lightbulb') {
                         adaptiveLightningConfiguration.prop('open', true)
-                        adaptiveLightningConfiguration.fadeIn('fast')
+                        showEditorSection(adaptiveLightningConfiguration)
                     } else {
-                        adaptiveLightningConfiguration.fadeOut('fast')
+                        hideEditorSection(adaptiveLightningConfiguration)
                     }
                 })
                 .change()
@@ -944,6 +963,20 @@ Send a `msg.payload` object whose keys are HomeKit characteristic names.
                 const selectedParentService = $('#node-input-parentService option:selected')
                 node.parentService = selectedParentService.val()
                 node.hostType = selectedParentService.attr("hostType")
+                node.bridge = ''
+                node.accessoryId = ''
+                $('#node-input-bridge').val('')
+                $('#node-input-accessoryId').val('')
+            } else if (node.hostType === '0') {
+                node.accessoryId = ''
+                node.parentService = ''
+                $('#node-input-accessoryId').val('')
+                $('#node-input-parentService').val('')
+            } else if (node.hostType === '1') {
+                node.bridge = ''
+                node.parentService = ''
+                $('#node-input-bridge').val('')
+                $('#node-input-parentService').val('')
             }
 
             node.serviceName = $(

package/build/nodes/service2.html

@@ -5,6 +5,7 @@
         align-items: center;
         gap: 6px;
         min-width: 0;
+        padding-right: 112px;
     }
 
     .nrchkb-editor .nrchkb-plugins-summary::-webkit-details-marker {
@@ -12,8 +13,10 @@
     }
 
     .nrchkb-editor .nrchkb-plugin-add {
-        margin-left: auto;
-        justify-self: end;
+        position: absolute;
+        top: 5px;
+        right: 8px;
+        z-index: 1;
         white-space: nowrap;
     }
 
@@ -85,6 +88,16 @@
         margin-top: 8px;
     }
 
+    .nrchkb-editor .nrchkb-plugin-shell {
+        position: relative;
+    }
+
+    .nrchkb-editor .nrchkb-plugin-section-toolbar {
+        display: flex;
+        justify-content: flex-end;
+        margin: 0 0 8px;
+    }
+
     .nrchkb-editor .nrchkb-plugin-section summary {
         display: flex;
         align-items: center;
@@ -131,19 +144,24 @@
     }
 
     .nrchkb-plugin-picker-item {
+        display: block;
+        width: 100%;
         padding: 9px 10px;
         border: 1px solid var(--red-ui-secondary-border-color, #d0d0d0);
         border-radius: 6px;
         background: var(--red-ui-primary-background, #fff);
+        color: var(--red-ui-primary-text-color, #333);
         cursor: pointer;
+        font: inherit;
+        text-align: left;
     }
 
-    .nrchkb-plugin-picker-item:not([aria-disabled="true"]):hover,
-    .nrchkb-plugin-picker-item:not([aria-disabled="true"]):focus-visible {
+    .nrchkb-plugin-picker-item:not(:disabled):hover,
+    .nrchkb-plugin-picker-item:not(:disabled):focus-visible {
         border-color: var(--red-ui-focus-color, var(--red-ui-text-color-link, #1a73e8));
     }
 
-    .nrchkb-plugin-picker-item[aria-disabled="true"] {
+    .nrchkb-plugin-picker-item:disabled {
         cursor: default;
         opacity: 0.55;
     }
@@ -173,18 +191,18 @@
 
 <script data-template-name="homekit-service2" type="text/x-red">
     <div class="nrchkb-editor">
-        <details id="plugins-configuration" class="nrchkb-section">
+        <details id="plugins-configuration" class="nrchkb-section nrchkb-plugin-shell">
             <summary class="nrchkb-plugins-summary">
                 <i class="fa fa-plug"></i>
                 <span class="nrchkb-plugin-label">
                     Plugins <span id="node-input-plugin-count" class="nrchkb-plugin-count">0</span>
                     <span id="node-input-plugin-summary-list" class="nrchkb-plugin-summary-list">No plugins attached</span>
                 </span>
-                <button type="button" id="node-input-add-plugin" class="red-ui-button red-ui-button-small nrchkb-plugin-add">
-                    <i class="fa fa-plus"></i>
-                    Add plugin
-                </button>
             </summary>
+            <button type="button" id="node-input-add-plugin" class="red-ui-button red-ui-button-small nrchkb-plugin-add">
+                <i class="fa fa-plus"></i>
+                Add plugin
+            </button>
             <div class="nrchkb-section-body">
                 <div class="nrchkb-plugin-slot-fields" style="display: none;">
                     <input type="hidden" id="node-input-plugins">
@@ -670,6 +688,35 @@ To discover valid characteristic names for the selected service, send a test pay
             let node = this
             let isParentToggle = $('#node-config-input-isParent')
             const cameraPluginId = 'node-red-contrib-homekit-bridged:homebridge-camera-ffmpeg'
+            const prefersReducedMotion = function () {
+                return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+            }
+            const showEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).show()
+                    return
+                }
+
+                section.stop(true, true).fadeIn('fast')
+            }
+            const hideEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).hide()
+                    return
+                }
+
+                section.stop(true, true).fadeOut('fast')
+            }
+            const scrollEditorSectionIntoView = function (element) {
+                if (!element || !element.scrollIntoView) {
+                    return
+                }
+
+                element.scrollIntoView({
+                    behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+                    block: 'start'
+                })
+            }
 
             if (node.isParent === false) {
                 isParentToggle.val('false')
@@ -685,11 +732,11 @@ To discover valid characteristic names for the selected service, send a test pay
             isParentToggle
                 .change(function () {
                     if (isParentToggle.val() === 'true') {
-                        isLinkedDiv.fadeOut('fast')
-                        isParentDiv.fadeIn('fast')
+                        hideEditorSection(isLinkedDiv)
+                        showEditorSection(isParentDiv)
                     } else {
-                        isParentDiv.fadeOut('fast')
-                        isLinkedDiv.fadeIn('fast')
+                        hideEditorSection(isParentDiv)
+                        showEditorSection(isLinkedDiv)
                         selectHostType.val("_ADD_")
                     }
                 })
@@ -1069,6 +1116,21 @@ To discover valid characteristic names for the selected service, send a test pay
                 return sectionId + '-' + (field.path || 'field').replace(/[^a-zA-Z0-9_-]/g, '-')
             }
 
+            const appendPluginFieldHelp = function (row, input, fieldId, field) {
+                const helpText = field.description || field.placeholder || ''
+
+                if (!helpText) {
+                    return
+                }
+
+                const helpId = fieldId + '-help'
+                input.attr('aria-describedby', helpId)
+                $('<div/>', {
+                    id: helpId,
+                    class: 'nrchkb-plugin-instance-help'
+                }).text(helpText).appendTo(row)
+            }
+
             const renderPluginField = function (body, section, field, config) {
                 const sectionId = section.attr('id')
                 const fieldId = createPluginFieldId(sectionId, field)
@@ -1130,14 +1192,6 @@ To discover valid characteristic names for the selected service, send a test pay
                         rows: 4
                     }).appendTo(row)
                     input.val(value === undefined ? '' : value)
-                    if (field.placeholder) {
-                        const helpId = fieldId + '-help'
-                        input.attr('aria-describedby', helpId)
-                        $('<div/>', {
-                            id: helpId,
-                            class: 'nrchkb-plugin-instance-help'
-                        }).text(field.placeholder).appendTo(row)
-                    }
                 } else {
                     input = $('<input/>', {
                         type: field.type === 'number' ? 'number' : field.type === 'password' ? 'password' : 'text',
@@ -1173,6 +1227,8 @@ To discover valid characteristic names for the selected service, send a test pay
                     input.attr('data-plugin-dynamic-select', 'true')
                     input.data('pluginDynamicValue', value === undefined ? '' : value)
                 }
+
+                appendPluginFieldHelp(row, input, fieldId, field)
             }
 
             const loadDynamicPluginSelect = function (section, input) {
@@ -1315,6 +1371,9 @@ To discover valid characteristic names for the selected service, send a test pay
                     const summary = $('<summary/>').appendTo(section)
                     $('<i/>', {class: 'fa fa-plug'}).appendTo(summary)
                     $('<span/>', {class: 'nrchkb-plugin-title'}).text(title).appendTo(summary)
+
+                    const body = $('<div/>', {class: 'nrchkb-section-body'}).appendTo(section)
+                    const toolbar = $('<div/>', {class: 'nrchkb-plugin-section-toolbar'}).appendTo(body)
                     $('<button/>', {
                         type: 'button',
                         class: 'red-ui-button red-ui-button-small nrchkb-plugin-remove',
@@ -1322,9 +1381,8 @@ To discover valid characteristic names for the selected service, send a test pay
                         title: 'Remove plugin'
                     })
                         .append($('<i/>', {class: 'fa fa-remove'}))
-                        .appendTo(summary)
+                        .appendTo(toolbar)
 
-                    const body = $('<div/>', {class: 'nrchkb-section-body'}).appendTo(section)
                     renderPluginEditor(body, entry, plugin || {}, section)
                 })
 
@@ -1332,6 +1390,11 @@ To discover valid characteristic names for the selected service, send a test pay
                     renderConfigNodePluginSection(entry, getPluginMetadata(entry.id), index)
                 })
             }
+            let pluginRenderTimer
+            const schedulePluginSectionsRefresh = function () {
+                clearTimeout(pluginRenderTimer)
+                pluginRenderTimer = window.setTimeout(renderPluginSections, 250)
+            }
 
             const pluginSlotNames = [
                 'plugin1',
@@ -1448,6 +1511,9 @@ To discover valid characteristic names for the selected service, send a test pay
                 const summary = $('<summary/>').appendTo(section)
                 $('<i/>', {class: 'fa fa-plug'}).appendTo(summary)
                 $('<span/>', {class: 'nrchkb-plugin-title'}).text(title).appendTo(summary)
+
+                const body = $('<div/>', {class: 'nrchkb-section-body'}).appendTo(section)
+                const toolbar = $('<div/>', {class: 'nrchkb-plugin-section-toolbar'}).appendTo(body)
                 $('<button/>', {
                     type: 'button',
                     class: 'red-ui-button red-ui-button-small nrchkb-plugin-remove',
@@ -1456,9 +1522,8 @@ To discover valid characteristic names for the selected service, send a test pay
                     'data-slot': entry.slot
                 })
                     .append($('<i/>', {class: 'fa fa-remove'}))
-                    .appendTo(summary)
+                    .appendTo(toolbar)
 
-                const body = $('<div/>', {class: 'nrchkb-section-body'}).appendTo(section)
                 if (plugin) {
                     body.append(createPluginAbout(plugin))
                 }
@@ -1489,8 +1554,7 @@ To discover valid characteristic names for the selected service, send a test pay
                 }
                 RED.editor.editConfig(slot, 'homekit-plugin-instance', '_ADD_', 'node-input', node)
                 pluginSetupComplete = true
-                window.setTimeout(renderPluginSections, 100)
-                window.setTimeout(renderPluginSections, 500)
+                schedulePluginSectionsRefresh()
             }
 
             const addPluginEntry = function (entry) {
@@ -1540,12 +1604,11 @@ To discover valid characteristic names for the selected service, send a test pay
                         : !duplicateAllowed
                             ? 'Already added'
                             : renderCompatibilityText(plugin)
-                    const item = $('<div/>', {
+                    const item = $('<button/>', {
                         class: 'nrchkb-plugin-picker-item',
-                        'aria-disabled': disabled ? 'true' : 'false',
                         'aria-label': getPluginDisplayLabel(plugin) + '. ' + reason,
-                        role: 'button',
-                        tabindex: disabled ? '-1' : '0'
+                        disabled,
+                        type: 'button'
                     }).appendTo(dialog)
 
                     $('<div/>', {class: 'nrchkb-plugin-picker-title'})
@@ -1573,20 +1636,6 @@ To discover valid characteristic names for the selected service, send a test pay
                         }
 
                         item.on('click', addSelectedPlugin)
-                        item.on('keydown', function (event) {
-                            if (event.key === 'Enter') {
-                                event.preventDefault()
-                                addSelectedPlugin()
-                            } else if (event.key === ' ') {
-                                event.preventDefault()
-                            }
-                        })
-                        item.on('keyup', function (event) {
-                            if (event.key === ' ') {
-                                event.preventDefault()
-                                addSelectedPlugin()
-                            }
-                        })
                     }
                 })
 
@@ -1672,8 +1721,7 @@ To discover valid characteristic names for the selected service, send a test pay
                     const configNodeId = $(this).attr('data-config-id') || getPluginSlotValue(slot)
                     if (RED.editor && RED.editor.editConfig) {
                         RED.editor.editConfig(slot, 'homekit-plugin-instance', configNodeId || '_ADD_', 'node-input', node)
-                        window.setTimeout(renderPluginSections, 100)
-                        window.setTimeout(renderPluginSections, 500)
+                        schedulePluginSectionsRefresh()
                     }
                     return
                 }
@@ -1687,12 +1735,7 @@ To discover valid characteristic names for the selected service, send a test pay
 
                 section.prop('open', true)
 
-                if (section[0] && section[0].scrollIntoView) {
-                    section[0].scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
-                    })
-                }
+                scrollEditorSectionIntoView(section[0])
             })
 
             pluginOverview.on('click', '.nrchkb-plugin-overview-remove', function (event) {
@@ -1832,9 +1875,9 @@ To discover valid characteristic names for the selected service, send a test pay
                 .change(function () {
                     if (this.value === 'Lightbulb') {
                         adaptiveLightningConfiguration.prop('open', true)
-                        adaptiveLightningConfiguration.fadeIn('fast')
+                        showEditorSection(adaptiveLightningConfiguration)
                     } else {
-                        adaptiveLightningConfiguration.fadeOut('fast')
+                        hideEditorSection(adaptiveLightningConfiguration)
                     }
                 })
                 .change()
@@ -1967,6 +2010,20 @@ To discover valid characteristic names for the selected service, send a test pay
                 const selectedParentService = $('#node-input-parentService option:selected')
                 node.parentService = selectedParentService.val()
                 node.hostType = selectedParentService.attr("hostType")
+                node.bridge = ''
+                node.accessoryId = ''
+                $('#node-input-bridge').val('')
+                $('#node-input-accessoryId').val('')
+            } else if (node.hostType === '0') {
+                node.accessoryId = ''
+                node.parentService = ''
+                $('#node-input-accessoryId').val('')
+                $('#node-input-parentService').val('')
+            } else if (node.hostType === '1') {
+                node.bridge = ''
+                node.parentService = ''
+                $('#node-input-bridge').val('')
+                $('#node-input-parentService').val('')
             }
 
             node.serviceName = $(

package/build/nodes/standalone.html

@@ -18,7 +18,7 @@
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-pinCode"><i class="fa fa-key"></i> Pin Code</label>
-                    <input type="text" id="node-config-input-pinCode" placeholder="xxxx-xxxx">
+                    <input type="text" id="node-config-input-pinCode" placeholder="xxxx-xxxx" inputmode="numeric" autocomplete="off" spellcheck="false">
                 </div>
                 <div class="form-row nrchkb-checkbox-row">
                     <label class="nrchkb-checkbox-label" for="node-config-input-allowInsecureRequest">
@@ -40,7 +40,7 @@
             <div class="nrchkb-section-body">
                 <div class="form-row">
                     <label for="node-config-input-port"><i class="fa fa-plug"></i> Port</label>
-                    <input type="text" id="node-config-input-port" placeholder="Leave blank to auto assign">
+                    <input type="text" id="node-config-input-port" placeholder="Leave blank to auto assign" inputmode="numeric" autocomplete="off" spellcheck="false">
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-advertiser"><i class="fa fa-bullhorn"></i> Advertiser</label>
@@ -53,7 +53,7 @@
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-bind"><i class="fa fa-sitemap"></i> Bind</label>
-                    <input type="text" id="node-config-input-bind" placeholder="::">
+                    <input type="text" id="node-config-input-bind" placeholder="::" autocomplete="off" spellcheck="false">
                     <input type="hidden" id="node-config-input-bindType">
                 </div>
             </div>
@@ -304,6 +304,25 @@ Defines a HomeKit accessory that is paired directly in the Apple Home app. Use i
         },
         oneditprepare: function () {
             const node = this
+            const prefersReducedMotion = function () {
+                return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+            }
+            const showEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).show()
+                    return
+                }
+
+                section.stop(true, true).fadeIn('fast')
+            }
+            const hideEditorSection = function (section) {
+                if (prefersReducedMotion()) {
+                    section.stop(true, true).hide()
+                    return
+                }
+
+                section.stop(true, true).fadeOut('fast')
+            }
 
             if (!validatePinCode(node.pinCode)) {
                 node.pinCode = generatePinCode()
@@ -325,9 +344,9 @@ Defines a HomeKit accessory that is paired directly in the Apple Home app. Use i
                 .change(function () {
                     if (this.checked) {
                         mdnsConfigurationSection.prop('open', true)
-                        mdnsConfiguration.fadeIn('fast')
+                        showEditorSection(mdnsConfiguration)
                     } else {
-                        mdnsConfiguration.fadeOut('fast')
+                        hideEditorSection(mdnsConfiguration)
                     }
                 })
                 .change()

package/build/nodes/unifi-controller.html

@@ -15,19 +15,19 @@
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-address"><i class="fa fa-globe"></i> Address</label>
-                    <input type="text" id="node-config-input-address" placeholder="192.168.1.1">
+                    <input type="text" id="node-config-input-address" placeholder="192.168.1.1" autocomplete="url" spellcheck="false">
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-username"><i class="fa fa-user"></i> Username</label>
-                    <input type="text" id="node-config-input-username">
+                    <input type="text" id="node-config-input-username" autocomplete="username" spellcheck="false">
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-password"><i class="fa fa-lock"></i> Password</label>
-                    <input type="password" id="node-config-input-password">
+                    <input type="password" id="node-config-input-password" autocomplete="current-password">
                 </div>
                 <div class="form-row">
                     <label for="node-config-input-overrideAddress"><i class="fa fa-random"></i> Override Address</label>
-                    <input type="text" id="node-config-input-overrideAddress" placeholder="Optional livestream address">
+                    <input type="text" id="node-config-input-overrideAddress" placeholder="Optional livestream address" autocomplete="url" spellcheck="false">
                 </div>
                 <div class="form-row nrchkb-checkbox-row">
                     <label class="nrchkb-checkbox-label" for="node-config-input-allowSelfSigned">

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-homekit-bridged",
-    "version": "2.0.0-dev.7",
+    "version": "2.0.0-dev.9",
     "description": "Node-RED nodes to simulate Apple HomeKit devices.",
     "main": "build/nodes/nrchkb.js",
     "scripts": {