feat(dev-overlay): Hide plugins into a separate menu when there's too many enabled (#9102)

7 files changed, 220 insertions, 14 deletions

diff --git a/.changeset/fresh-garlics-film.md b/.changeset/fresh-garlics-film.md
new file mode 100644
index 000000000..12a20ddf8
--- /dev/null
+++ b/.changeset/fresh-garlics-film.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+In the dev overlay, when there's too many plugins enabled at once, some of the plugins will now be hidden in a separate sub menu to avoid the bar becoming too long
diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
index 887449c37..65e50c98e 100644
--- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
@@ -1,6 +1,8 @@
 import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js';
 import { type AstroDevOverlay, type DevOverlayPlugin } from './overlay.js';
+
 import { settings } from './settings.js';
+import type { Icon } from './ui-library/icons.js';
 
 let overlay: AstroDevOverlay;
 
@@ -17,6 +19,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 		{ DevOverlayTooltip },
 		{ DevOverlayWindow },
 		{ DevOverlayToggle },
+		{ getIconElement, isDefinedIcon },
 	] = await Promise.all([
 		// @ts-expect-error
 		import('astro:dev-overlay'),
@@ -30,6 +33,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 		import('./ui-library/tooltip.js'),
 		import('./ui-library/window.js'),
 		import('./ui-library/toggle.js'),
+		import('./ui-library/icons.js'),
 	]);
 
 	// Register custom elements
@@ -53,6 +57,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 			builtIn: builtIn,
 			active: false,
 			status: 'loading' as const,
+			notification: { state: false },
 			eventTarget: eventTarget,
 		};
 
@@ -66,7 +71,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 				newState = evt.detail.state ?? true;
 			}
 
-			if (settings.config.showPluginNotifications === false) {
+			plugin.notification.state = newState;
+
+			if (settings.config.disablePluginNotification === false) {
 				target.querySelector('.notification')?.toggleAttribute('data-active', newState);
 			}
 		});
@@ -83,11 +90,171 @@ document.addEventListener('DOMContentLoaded', async () => {
 		return plugin;
 	};
 
+	const astromorePlugin = {
+		id: 'astro:more',
+		name: 'More',
+		icon: 'dots-three',
+		init(canvas, eventTarget) {
+			const hiddenPlugins = plugins.filter((p) => !p.builtIn).slice(overlay.customPluginsToShow);
+
+			createDropdown();
+
+			document.addEventListener('astro:after-swap', createDropdown);
+
+			function createDropdown() {
+				const style = document.createElement('style');
+				style.innerHTML = `
+					#dropdown {
+						background: rgba(19, 21, 26, 1);
+						border: 1px solid rgba(52, 56, 65, 1);
+						border-radius: 12px;
+						box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
+						width: 180px;
+						padding: 8px;
+						z-index: 9999999999;
+					}
+
+					.notification {
+						display: none;
+						position: absolute;
+						top: -4px;
+						right: -6px;
+						width: 8px;
+						height: 8px;
+						border-radius: 9999px;
+						border: 1px solid rgba(19, 21, 26, 1);
+						background: #B33E66;
+					}
+
+					.notification[data-active] {
+						display: block;
+					}
+
+					#dropdown button {
+						border: 0;
+						background: transparent;
+						color: white;
+						font-family: system-ui, sans-serif;
+						font-size: 16px;
+						line-height: 1.2;
+						white-space: nowrap;
+						text-decoration: none;
+						margin: 0;
+						display: flex;
+    				align-items: center;
+						width: 100%;
+						padding: 8px;
+						border-radius: 8px;
+					}
+
+					#dropdown button:hover, #dropdown button:focus-visible {
+						background: rgba(27, 30, 36, 1);
+						cursor: pointer;
+					}
+
+					#dropdown button.active {
+						background: rgba(71, 78, 94, 1);
+					}
+
+					#dropdown .icon {
+						position: relative;
+						height: 24px;
+						width: 24px;
+						margin-right: 0.5em;
+					}
+
+					#dropdown .icon svg {
+						max-height: 100%;
+						max-width: 100%;
+					}
+				`;
+				canvas.append(style);
+
+				const dropdown = document.createElement('div');
+				dropdown.id = 'dropdown';
+
+				for (const plugin of hiddenPlugins) {
+					const buttonContainer = document.createElement('div');
+					buttonContainer.classList.add('item');
+					const button = document.createElement('button');
+					button.setAttribute('data-plugin-id', plugin.id);
+
+					const iconContainer = document.createElement('div');
+					const iconElement = getPluginIcon(plugin.icon);
+					iconContainer.append(iconElement);
+
+					const notification = document.createElement('div');
+					notification.classList.add('notification');
+					iconContainer.append(notification);
+					iconContainer.classList.add('icon');
+
+					button.append(iconContainer);
+					button.append(document.createTextNode(plugin.name));
+
+					button.addEventListener('click', () => {
+						overlay.togglePluginStatus(plugin);
+					});
+					buttonContainer.append(button);
+
+					dropdown.append(buttonContainer);
+
+					eventTarget.addEventListener('plugin-toggled', positionDropdown);
+					window.addEventListener('resize', positionDropdown);
+
+					plugin.eventTarget.addEventListener('toggle-notification', (evt) => {
+						if (!(evt instanceof CustomEvent)) return;
+
+						if (settings.config.disablePluginNotification === false) {
+							notification.toggleAttribute('data-active', evt.detail.state ?? true);
+						}
+
+						eventTarget.dispatchEvent(
+							new CustomEvent('toggle-notification', {
+								detail: {
+									state: hiddenPlugins.some((p) => p.notification.state === true),
+								},
+							})
+						);
+					});
+				}
+
+				canvas.append(dropdown);
+
+				function getPluginIcon(icon: Icon) {
+					if (isDefinedIcon(icon)) {
+						return getIconElement(icon)!;
+					}
+
+					return icon;
+				}
+
+				function positionDropdown() {
+					const moreButtonRect = overlay.shadowRoot
+						.querySelector('[data-plugin-id="astro:more"]')
+						?.getBoundingClientRect();
+					const dropdownRect = dropdown.getBoundingClientRect();
+
+					if (moreButtonRect && dropdownRect) {
+						dropdown.style.position = 'absolute';
+						dropdown.style.top = `${moreButtonRect.top - dropdownRect.height - 12}px`;
+						dropdown.style.left = `${
+							moreButtonRect.left + moreButtonRect.width - dropdownRect.width
+						}px`;
+					}
+				}
+			}
+		},
+	} satisfies DevOverlayPluginDefinition;
+
 	const customPluginsDefinitions = (await loadDevOverlayPlugins()) as DevOverlayPluginDefinition[];
 	const plugins: DevOverlayPlugin[] = [
-		...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin, astroSettingsPlugin].map(
-			(pluginDef) => preparePlugin(pluginDef, true)
-		),
+		...[
+			astroDevToolPlugin,
+			astroXrayPlugin,
+			astroAuditPlugin,
+			astroSettingsPlugin,
+			astromorePlugin,
+		].map((pluginDef) => preparePlugin(pluginDef, true)),
 		...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false)),
 	];
 
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 70d957269..900c3fb0f 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -7,6 +7,9 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & {
 	builtIn: boolean;
 	active: boolean;
 	status: 'ready' | 'loading' | 'error';
+	notification: {
+		state: boolean;
+	};
 	eventTarget: EventTarget;
 };
 
@@ -20,6 +23,7 @@ export class AstroDevOverlay extends HTMLElement {
 	plugins: DevOverlayPlugin[] = [];
 	HOVER_DELAY = 750;
 	hasBeenInitialized = false;
+	customPluginsToShow = 3;
 
 	constructor() {
 		super();
@@ -164,8 +168,8 @@ export class AstroDevOverlay extends HTMLElement {
 			#dev-bar .item .notification {
 				display: none;
 				position: absolute;
-				top: -2px;
-				right: 0;
+				top: -4px;
+				right: -6px;
 				width: 8px;
 				height: 8px;
 				border-radius: 9999px;
@@ -236,17 +240,27 @@ export class AstroDevOverlay extends HTMLElement {
 			<div id="dev-bar">
 				<div id="bar-container">
 					${this.plugins
-						.filter((plugin) => plugin.builtIn && plugin.id !== 'astro:settings')
+						.filter(
+							(plugin) => plugin.builtIn && !['astro:settings', 'astro:more'].includes(plugin.id)
+						)
 						.map((plugin) => this.getPluginTemplate(plugin))
 						.join('')}
 					${
 						this.plugins.filter((plugin) => !plugin.builtIn).length > 0
 							? `<div class="separator"></div>${this.plugins
 									.filter((plugin) => !plugin.builtIn)
+									.slice(0, this.customPluginsToShow)
 									.map((plugin) => this.getPluginTemplate(plugin))
 									.join('')}`
 							: ''
 					}
+					${
+						this.plugins.filter((plugin) => !plugin.builtIn).length > this.customPluginsToShow
+							? this.getPluginTemplate(
+									this.plugins.find((plugin) => plugin.builtIn && plugin.id === 'astro:more')!
+							  )
+							: ''
+					}
 					<div class="separator"></div>
 					${this.getPluginTemplate(
 						this.plugins.find((plugin) => plugin.builtIn && plugin.id === 'astro:settings')!
@@ -438,9 +452,19 @@ export class AstroDevOverlay extends HTMLElement {
 		}
 
 		plugin.active = newStatus ?? !plugin.active;
-		const target = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`);
-		if (!target) return;
-		target.classList.toggle('active', plugin.active);
+		const mainBarButton = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`);
+		const moreBarButton = this.getPluginCanvasById('astro:more')?.shadowRoot?.querySelector(
+			`[data-plugin-id="${plugin.id}"]`
+		);
+
+		if (mainBarButton) {
+			mainBarButton.classList.toggle('active', plugin.active);
+		}
+
+		if (moreBarButton) {
+			moreBarButton.classList.toggle('active', plugin.active);
+		}
+
 		pluginCanvas.style.display = plugin.active ? 'block' : 'none';
 
 		window.requestAnimationFrame(() => {
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
index c4202c5c1..e0d338446 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
@@ -15,10 +15,10 @@ const settingsRows = [
 		name: 'Disable notifications',
 		description: 'Notification bubbles will not be shown when this is enabled.',
 		input: 'checkbox',
-		settingKey: 'showPluginNotifications',
+		settingKey: 'disablePluginNotification',
 		changeEvent: (evt: Event) => {
 			if (evt.currentTarget instanceof HTMLInputElement) {
-				settings.updateSetting('showPluginNotifications', evt.currentTarget.checked);
+				settings.updateSetting('disablePluginNotification', evt.currentTarget.checked);
 			}
 		},
 	},
diff --git a/packages/astro/src/runtime/client/dev-overlay/settings.ts b/packages/astro/src/runtime/client/dev-overlay/settings.ts
index a6c086d2c..7ba12f2db 100644
--- a/packages/astro/src/runtime/client/dev-overlay/settings.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/settings.ts
@@ -1,10 +1,10 @@
 export interface Settings {
-	showPluginNotifications: boolean;
+	disablePluginNotification: boolean;
 	verbose: boolean;
 }
 
 export const defaultSettings = {
-	showPluginNotifications: true,
+	disablePluginNotification: false,
 	verbose: false,
 } satisfies Settings;
 
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
index 7a0236900..d9445e44a 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts
@@ -31,4 +31,6 @@ const icons = {
 	'check-circle':
 		'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="#fff" d="M10.0306 4.96938c.0699.06967.1254.15247.1633.24363.0378.09116.0573.1889.0573.28762 0 .09871-.0195.19645-.0573.28761-.0379.09116-.0934.17396-.1633.24364L6.53063 9.53187c-.06968.06992-.15247.1254-.24364.16326-.09116.03785-.1889.05734-.28761.05734-.09871 0-.19645-.01949-.28762-.05734-.09116-.03786-.17395-.09334-.24363-.16326l-1.5-1.5c-.06977-.06976-.12511-.15258-.16286-.24373-.03776-.09116-.05719-.18885-.05719-.28752 0-.09866.01943-.19635.05719-.28751.03775-.09115.09309-.17397.16286-.24373.06976-.06977.15259-.12511.24374-.16287.09115-.03775.18885-.05719.28751-.05719s.19636.01944.28751.05719c.09115.03776.17397.0931.24374.16287L6 7.9375l2.96938-2.97c.06978-.06961.15259-.12478.24371-.16237.09111-.03758.18874-.05683.2873-.05666.09856.00018.19612.01978.28711.05768.09098.0379.1736.09337.2431.16323ZM13.75 7c0 1.33502-.3959 2.64007-1.1376 3.7501-.7417 1.11-1.7959 1.9752-3.02928 2.4861-1.23341.5109-2.5906.6446-3.89998.3841-1.30937-.2605-2.5121-.9033-3.45611-1.8473-.944-.944-1.586877-2.14677-1.847328-3.45614-.26045-1.30937-.126777-2.66657.384114-3.89997C1.27471 3.18349 2.13987 2.12928 3.2499 1.38758 4.35994.645881 5.66498.25 7 .25c1.78961.001985 3.5053.713781 4.7708 1.97922C13.0362 3.49466 13.748 5.2104 13.75 7Zm-1.5 0c0-1.03835-.3079-2.05339-.8848-2.91674-.5769-.86336-1.3968-1.53627-2.35611-1.93363-.95931-.39736-2.01491-.50133-3.03331-.29875-1.0184.20257-1.95386.70258-2.68809 1.43681-.73422.73422-1.23424 1.66969-1.43681 2.68809-.20257 1.0184-.0986 2.074.29876 3.03331.39736.95931 1.07026 1.77921 1.93362 2.35611.86336.5769 1.87839.8848 2.91674.8848 1.39193-.0015 2.72643-.5551 3.7107-1.5393C11.6949 9.72642 12.2485 8.39193 12.25 7Z"/></svg>',
 	gear: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22"><path fill="#fff" d="M11 6.12507c-.9642 0-1.90671.28592-2.7084.82159-.80169.53567-1.42653 1.29704-1.79551 2.18783-.36898.89081-.46552 1.87101-.27742 2.81661.18811.9457.6524 1.8143 1.33419 2.4961.68178.6818 1.55042 1.1461 2.49604 1.3342.9457.1881 1.9259.0916 2.8167-.2774s1.6521-.9938 2.1878-1.7955c.5357-.8017.8216-1.7442.8216-2.7084-.0015-1.2925-.5156-2.53161-1.4295-3.44553-.9139-.91392-2.153-1.42801-3.4455-1.4295Zm0 7.50003c-.5192 0-1.02669-.154-1.45837-.4424-.43168-.2885-.76813-.6984-.96681-1.1781-.19868-.4796-.25067-1.0074-.14938-1.5166.10129-.50924.35129-.97697.71841-1.34408.36711-.36712.83484-.61712 1.34405-.71841.5092-.10129 1.037-.0493 1.5166.14938.4797.19868.8897.53513 1.1781.96681.2884.43168.4424.9392.4424 1.4584 0 .6962-.2766 1.3638-.7688 1.8561-.4923.4923-1.16.7689-1.8562.7689Zm8.625-2.551v-.1481l1.3125-1.64155c.1102-.13755.1865-.29905.2228-.4715s.0316-.35102-.0137-.52131c-.2369-.89334-.5909-1.75142-1.0528-2.55188-.089-.15264-.2127-.28218-.3611-.37811-.1484-.09594-.3173-.15557-.493-.17408l-2.0888-.23437-.104-.10406-.2344-2.08969c-.0186-.17556-.0783-.34426-.1743-.49247-.0959-.1482-.2254-.27175-.3779-.36066-.8005-.46341-1.6589-.81869-2.5528-1.056559-.1704-.044683-.349-.048704-.5213-.01174-.1723.036965-.3335.113881-.4706.224549l-1.6415 1.3125h-.1482l-1.64152-1.3125C9.14683.9524 8.98532.87608 8.81288.839767c-.17245-.036314-.35102-.031606-.52132.013744-.89357.238319-1.75165.593909-2.55187 1.057499-.15205.08854-.28121.2115-.37712.35901-.0959.14752-.15586.31547-.17507.49037l-.23437 2.08875-.10407.10406-2.08968.23437c-.17556.01865-.34426.07835-.49247.17428-.14821.09593-.27176.22539-.36066.37791-.46211.80072-.81613 1.65912-1.052812 2.55281-.045195.17016-.049823.34855-.013512.52082.03631.17227.112546.33362.222574.47106L2.375 10.926v.1481l-1.3125 1.6416c-.110173.1375-.186492.299-.222806.4715-.036313.1724-.031605.351.013744.5213.238622.8936.594522 1.7517 1.058442 2.5519.08844.1519.21126.281.3586.3769.14734.0959.3151.1559.48983.1753l2.08875.2325.10407.104.23437 2.0916c.01865.1756.07835.3443.17428.4925.09592.1482.22538.2717.37791.3606.80052.4634 1.65893.8187 2.55281 1.0566.17045.0447.349.0487.52129.0117.17228-.0369.33347-.1139.47059-.2245l1.64152-1.3125h.1482l1.6415 1.3125c.1376.1101.2991.1865.4715.2228.1725.0363.351.0316.5213-.0138.8934-.2368 1.7514-.5908 2.5519-1.0528.1524-.0883.2819-.2112.3782-.3587.0962-.1475.1565-.3156.1759-.4907l.2325-2.0887.104-.1041 2.0897-.239c.1751-.0194.3432-.0797.4907-.1759.1475-.0963.2704-.2258.3587-.3782.4634-.8005.8187-1.6589 1.0566-2.5528.0448-.1699.0493-.3479.013-.5198-.0363-.172-.1124-.333-.2221-.4702l-1.3125-1.6416Zm-2.2612-.4584c.015.256.015.5127 0 .7687-.0168.2784.0704.553.2446.7707l1.2038 1.5047c-.1136.3363-.2492.6648-.406.9834l-1.9153.2128c-.2773.0317-.5329.1654-.7171.375-.1704.1919-.3519.3735-.5438.5438-.2096.1842-.3433.4398-.375.7171l-.2119 1.9144c-.3185.1574-.647.2936-.9834.4078l-1.5047-1.2047c-.1997-.1593-.4477-.2459-.7031-.2456h-.0675c-.2561.015-.5127.015-.7688 0-.2781-.0165-.5525.0703-.7706.2438l-1.50469 1.2047c-.33634-.1137-.66486-.2493-.98343-.406l-.21282-1.9153c-.0317-.2773-.16536-.5329-.375-.7172-.19187-.1703-.37344-.3519-.54375-.5437-.18426-.2097-.43988-.3433-.71718-.375l-1.91438-.2119c-.15734-.3185-.29357-.647-.40781-.9834l1.20375-1.5047c.17424-.2177.26144-.4923.24469-.7707-.01501-.256-.01501-.5127 0-.7687.01675-.2783-.07045-.553-.24469-.77063L3.18781 8.34038c.11364-.33634.24924-.66486.40594-.98343l1.91531-.21281c.27731-.03171.53292-.16537.71719-.375.17031-.19188.35188-.37345.54375-.54375.20964-.18427.3433-.43989.375-.71719l.21188-1.91438c.31852-.15734.64704-.29357.98343-.40781L9.845 4.3907c.2181.17343.4925.26023.7706.24375.2561-.015.5127-.015.7688 0 .2782.01701.5528-.06985.7706-.24375l1.5047-1.20469c.3364.11424.6649.25047.9834.40781l.2128 1.91532c.0317.2773.1654.53292.375.71718.1919.17031.3735.35188.5438.54375.1843.20964.4399.3433.7172.375l1.9143.21188c.1574.31852.2936.64704.4079.98343l-1.2038 1.50469c-.1749.21743-.2628.49203-.2465.77063Z"/></svg>',
+	'dots-three':
+		'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 4"><path fill="#fff" d="M9.5 2c0 .29667-.08797.58668-.2528.83336-.16482.24667-.39908.43893-.67317.55246-.27409.11353-.57569.14324-.86666.08536-.29098-.05788-.55825-.20074-.76803-.41052-.20978-.20978-.35264-.47705-.41052-.76802-.05788-.29098-.02817-.59258.08536-.86666.11353-.27409.30579-.508362.55247-.673184C7.41332.587974 7.70333.5 8 .5c.39783 0 .77936.158036 1.06066.43934C9.34196 1.22064 9.5 1.60218 9.5 2ZM1.625.5c-.29667 0-.58668.087974-.833354.252796-.246674.164822-.438933.399094-.552465.673184-.113531.27408-.1432361.57568-.085358.86666.057878.29097.200739.55824.410518.76802.209778.20978.477049.35264.768029.41052.29097.05788.59257.02817.86666-.08536.27408-.11353.50835-.30579.67318-.55246C3.03703 2.58668 3.125 2.29667 3.125 2c0-.39782-.15803-.77936-.43934-1.06066C2.40436.658036 2.02283.5 1.625.5Zm12.75 0c-.2967 0-.5867.087974-.8334.252796-.2466.164822-.4389.399094-.5524.673184-.1135.27408-.1433.57568-.0854.86666.0579.29097.2008.55824.4105.76802.2098.20978.4771.35264.7681.41052.2909.05788.5925.02817.8666-.08536s.5084-.30579.6732-.55246c.1648-.24668.2528-.53669.2528-.83336 0-.39782-.158-.77936-.4393-1.06066C15.1544.658036 14.7728.5 14.375.5Z"/></svg>',
 } as const;
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
index 5ff21fd18..63dcba65e 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts
@@ -49,4 +49,12 @@ export class DevOverlayToggle extends HTMLElement {
 		this.input.type = 'checkbox';
 		this.shadowRoot.append(this.input);
 	}
+
+	get value() {
+		return this.input.value;
+	}
+
+	set value(val) {
+		this.input.value = val;
+	}
 }