Creates a SizeSelect component inside the given element.
The host element that will contain the size picker.
Optional display and behaviour configuration.
ProtectedhostProtectedconfigProtectedselectedProtectedtriggerProtectedtriggerProtectedmenuGets the currently selected size value.
Sets the currently selected size value.
Releases DOM/event resources owned by the control.
Sets the available size options and optionally selects a size.
An array of sizes.
OptionalselectedSize: numberThe size to select. Defaults to the first size in the array.
Protected ReadonlyonHandles the click event on the trigger button. Toggles the open/closed state of the dropdown menu.
Protected ReadonlyonHandles the click event on the document. Closes the dropdown menu if the click is outside the host element.
The click event.
Protected ReadonlyonHandles the click event on an option. Selects the clicked size and closes the dropdown menu.
The click event.
ProtectedrebuildReplaces the current option list with a new set of size values.
The numeric size values to render.
ProtectedbuildBuilds a single option button with a size preview and optional unit label.
The numeric size value for this option.
The constructed option button element.
ProtectedselectUpdates the internal selection state, syncs the trigger and option list, and optionally emits 'sizechange'.
The new size value to select.
Whether to dispatch the change event. Defaults to true.
ProtectedsyncUpdates the trigger button's preview text to the current size with its unit suffix.
ProtectedsyncToggles the selected CSS class and aria-selected attribute on all size option buttons.
ProtectedopenAdds the open CSS class and updates aria-expanded on the trigger button.
ProtectedcloseRemoves the open CSS class and updates aria-expanded on the trigger button.
A dropdown control for selecting sizes (e.g., font sizes, line widths). Emits a 'sizechange' event when the selected size changes. Example usage: const sizeSelect = new SizeSelect(document.getElementById('size-select'), { sizes: [8, 10, 12, 14, 16, 18, 20], unit: 'px', showLabel: true, });