This page tests the <au2-render> bridge component.
The Au2 ia-select component should render below:
Current value: ${selectProps.value || '(none)'}
\\r\\nValue type: ${typeof selectProps.value}
Events received from the bridge:
\\r\\n\\r\\nBoth instances share the same props - selecting in one updates the other:
\\r\\n\\r\\nBoth instances bind to the same sharedProps object.
Current value: ${inputProps.value}
\\r\\n \\r\\n \\r\\nCheckbox value: ${checkboxProps.value}
\\r\\n \\r\\nRadio value: ${radioProps1.value || '(none)'}
\\r\\nClick count: ${buttonClickCount}
\\r\\nAccordion content projected from Aurelia 1.
\\r\\n \\r\\nExpanded: ${accordionProps.expanded}
\\r\\n \\r\\nAccordion item content projected from Aurelia 1.
\\r\\n \\r\\nFavorited: ${accordionItemProps.favorited}
\\r\\nOption count: ${forceSyncProps.options.length}
\\r\\n \\r\\n \\r\\nTests that bridged Au2 components delegate navigation to Au1's router.
\\r\\n\\r\\nAu1 router active: ${au1RouterActive}
\\r\\nLast navigation target: ${lastNavTarget || '(none)'}
\\r\\nNavigation count: ${navCount}
\\r\\nMounted: ${showDynamicBridge}
\\r\\nComponent: ${dynamicComponentName}
\\r\\nMount count: ${dynamicMountCount}
\\r\\nBridge unmounted
\\r\\n\\r\\n These fixtures render preserved Au1 components with -v1 aliases beside the\\r\\n current bridged tags so Playwright can compare legacy and bridged output directly.\\r\\n
Value: ${parityInputBridge.value || '(empty)'}
\\r\\nChecked: ${parityCheckboxBridge.value}
\\r\\nValue: ${paritySelectBridge.value || '(none)'}
\\r\\nShared accordion content.
\\r\\n \\r\\nExpanded: ${parityAccordionBridge.expanded}
\\r\\nProjected notes.
\\r\\n \\r\\nFavorited: ${parityAccordionItemBridge.favorited}
\\r\\nFavorite event: ${parityAccordionItemBridgeFavoriteEvent || '(none)'}
\\r\\nItem event: ${parityAccordionItemBridgeItemEvent || '(none)'}
\\r\\nShowing: ${parityModalBridge.showing}
\\r\\n\\r\\n No Au1 equivalent exists, so these fixtures drive bridge-only regression tests.\\r\\n The left instance uses a flat items list with a projected trigger slot;\\r\\n the right uses groups with the default trigger button.\\r\\n
isOpen: ${dropdownMenuProps.isOpen}
\\r\\nposition: ${dropdownMenuProps.position}
\\r\\nlast action: ${dropdownLastAction || '(none)'}
\\r\\nisOpen: ${dropdownGroupsProps.isOpen}
\\r\\nlast action: ${dropdownGroupsLastAction || '(none)'}
\\r\\n\\r\\n Left surface renders the Au1 <disclosure-wording-v1> directly.\\r\\n Right surface renders the public bridged <disclosure-wording> tag.\\r\\n
Showing: ${parityDisclosureV1.showClientDisclosureModal}
\\r\\nShowing: ${parityDisclosureBridge.showClientDisclosureModal}
\\r\\n\\r\\n Left surface renders the Au1 <ia-html-editor> directly.\\r\\n Right surface renders the Au2 component through the bridge.\\r\\n
Content length: ${(parityHtmlEditorV1.content || '').length}
\\r\\nContent length: ${(parityHtmlEditorBridge.content || '').length}
\\r\\n\\r\\nselectProps: ${JSON.stringify(selectProps, null, 2)}\\r\\nsharedProps: ${JSON.stringify(sharedProps, null, 2)}\\r\\ninputProps: ${JSON.stringify(inputProps, null, 2)}\\r\\ncheckboxProps: ${JSON.stringify(checkboxProps, null, 2)}\\r\\nmodalProps: ${JSON.stringify(modalProps, null, 2)}\\r\\naccordionProps: ${JSON.stringify(accordionProps, null, 2)}\\r\\n \\r\\n Parity content for ia-html-editor.
';\r\n this.parityHtmlEditorV1 = { ...this.parityHtmlEditorV1, refreshContentOnce: true, content: seeded };\r\n this.parityHtmlEditorBridge = { ...this.parityHtmlEditorBridge, refreshContentOnce: true, content: seeded };\r\n }\r\n\r\n toggleHtmlEditorDisabled(): void {\r\n const disabled = !this.parityHtmlEditorBridge.disabled;\r\n this.parityHtmlEditorV1 = { ...this.parityHtmlEditorV1, disabled };\r\n this.parityHtmlEditorBridge = { ...this.parityHtmlEditorBridge, disabled };\r\n }\r\n\r\n toggleHtmlEditorInline(): void {\r\n const inline = !this.parityHtmlEditorBridge.inline;\r\n this.parityHtmlEditorV1 = {\r\n ...this.parityHtmlEditorV1,\r\n inline,\r\n refreshContentOnce: true,\r\n settings: { ...this.parityHtmlEditorV1.settings, inline },\r\n };\r\n this.parityHtmlEditorBridge = {\r\n ...this.parityHtmlEditorBridge,\r\n inline,\r\n refreshContentOnce: true,\r\n settings: { ...this.parityHtmlEditorBridge.settings, inline },\r\n };\r\n this.remountHtmlEditors();\r\n }\r\n\r\n loadHtmlEditorAdditionalPageTemplates(): void {\r\n this.parityHtmlEditorV1 = {\r\n ...this.parityHtmlEditorV1,\r\n context: 'additionalPage',\r\n };\r\n this.parityHtmlEditorBridge = {\r\n ...this.parityHtmlEditorBridge,\r\n context: 'additionalPage',\r\n };\r\n this.remountHtmlEditors();\r\n }\r\n\r\n handleHtmlEditorBridgePropsChanged(event: CustomEvent): void {\r\n const { property, value } = event.detail || {};\r\n if (property === 'content') {\r\n this.parityHtmlEditorBridge = { ...this.parityHtmlEditorBridge, content: value };\r\n }\r\n this.addLog(`HtmlEditor ${property} changed (bridge)`);\r\n }\r\n\r\n private createParityHtmlEditorState(kind: 'v1' | 'bridge'): Record