bootstrap5-toggle 5.2.0 → 5.3.0-rc1

package/js/bootstrap5-toggle.jquery.js

@@ -1,5 +1,5 @@
 /* Copyright Notice
- * bootstrap5-toggle v5.2.0
+ * bootstrap5-toggle v5.3.0-rc1
  * https://palcarazm.github.io/bootstrap5-toggle/
  * @author 2011-2014 Min Hur (https://github.com/minhur)
  * @author 2018-2019 Brent Ely (https://github.com/gitbrent)
@@ -66,6 +66,9 @@
             this.toggleHandle = this.createToggleHandle();
             this.toggleGroup = this.createToggleGroup();
             this.toggle = document.createElement("div");
+            if (options.tooltip) {
+                this.tooltipLabels = options.tooltip.title;
+            }
             if (this.isVisible()) {
                 this.renderToggle(options);
                 this.render(state);
@@ -150,17 +153,23 @@
        */
         DOMBuilder.prototype.renderToggle = function (_a) {
             var _b;
-            var style = _a.style, width = _a.width, height = _a.height, tabindex = _a.tabindex;
+            var style = _a.style, width = _a.width, height = _a.height, tabindex = _a.tabindex, aria = _a.aria, tooltip = _a.tooltip;
             this.toggle.className = "toggle btn ".concat(this.sizeClass, " ").concat(style);
             this.toggle.dataset.toggle = "toggle";
             this.toggle.tabIndex = tabindex;
-            this.toggle.role = "button";
+            this.toggle.role = "switch";
+            this.checkbox.tabIndex = -1;
+            if (this.invCheckbox)
+                this.invCheckbox.tabIndex = -1;
             (_b = this.checkbox.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(this.toggle, this.checkbox);
             this.toggle.appendChild(this.checkbox);
             if (this.invCheckbox)
                 this.toggle.appendChild(this.invCheckbox);
             this.toggle.appendChild(this.toggleGroup);
+            this.handleLabels(aria);
             this.handleToggleSize(width, height);
+            if (tooltip)
+                this.createTooltip(tooltip);
             this.isBuilt = true;
         };
         /**
@@ -212,6 +221,24 @@
        * @param height The height of the toggle element.
        */
         DOMBuilder.prototype.handleToggleSize = function (width, height) {
+            var _this = this;
+            this.cancelPendingAnimationFrame();
+            if (typeof requestAnimationFrame === "function") {
+                this.requestAnimationFrameId = requestAnimationFrame(function () {
+                    try {
+                        _this.calculateToggleSize(width, height);
+                    }
+                    catch (error) {
+                        console.warn("Error calculating toggle size:", error);
+                    }
+                });
+            }
+            else {
+                // Fallback if requestAnimationFrame is not supported
+                this.calculateToggleSize(width, height);
+            }
+        };
+        DOMBuilder.prototype.calculateToggleSize = function (width, height) {
             if (width) {
                 this.toggle.style.width = width;
             }
@@ -253,6 +280,50 @@
             var paddingBottom = Number.parseFloat(styles.paddingBottom);
             return (height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom);
         };
+        /**
+         * Cancels any pending animation frame request if one exists.
+         * This is used to prevent unnecessary calculations when the toggle size is being changed.
+         */
+        DOMBuilder.prototype.cancelPendingAnimationFrame = function () {
+            if (this.requestAnimationFrameId !== undefined && typeof cancelAnimationFrame === "function") {
+                cancelAnimationFrame(this.requestAnimationFrameId);
+                this.requestAnimationFrameId = undefined;
+            }
+        };
+        /**
+         * Handles the aria-labelledby and aria-label attributes of the toggle element.
+         * If the checkbox element has a labels property and the length of the labels property is greater than 0,
+         * the aria-labelledby attribute of the toggle element is set to the id of the labels elements.
+         * Otherwise, the aria-label attribute of the toggle element is set to the label property of the ariaOpts object.
+         * @param {AriaToggleOptions} ariaOpts - The object containing the label property to be used for the aria-label attribute.
+         */
+        DOMBuilder.prototype.handleLabels = function (ariaOpts) {
+            var _a;
+            if ((_a = this.checkbox.labels) === null || _a === void 0 ? void 0 : _a.length) {
+                var ids = Array.from(this.checkbox.labels)
+                    .map(function (l) { return l.id; })
+                    .filter(Boolean);
+                if (ids.length) {
+                    this.toggle.setAttribute("aria-labelledby", ids.join(" "));
+                }
+            }
+            else {
+                this.toggle.setAttribute("aria-label", ariaOpts.label);
+            }
+        };
+        /**
+         * Creates a tooltip for the toggle element.
+         * If the tooltip is successfully created, it is stored in the `tooltip` property of the DOMBuilder instance.
+         * @param {TooltipOptions} tooltip - The options for the tooltip.
+         */
+        DOMBuilder.prototype.createTooltip = function (tooltip) {
+            try {
+                this.tooltip = new globalThis.window.bootstrap.Tooltip(this.toggle, { placement: tooltip.placement, html: true, title: tooltip.title.on });
+            }
+            catch (error) {
+                console.error("Error creating tooltip:", error);
+            }
+        };
         /**
        * Renders the toggle element based on the provided state if the toggle is already built.
        * This method should be called whenever the state of the toggle changes.
@@ -265,15 +336,15 @@
             this.updateToggleByValue(state);
             this.updateToggleByChecked(state);
             this.updateToggleByState(state);
+            this.updateAria(state);
+            this.updateTooltip(state);
         };
-        /*************  ✨ Windsurf Command ⭐  *************/
         /**
          * Updates the class of the toggle element based on the provided state.
          * Removes any existing on/off/indeterminate classes and adds the appropriate class based on the state.
          * If the state is indeterminate, adds the 'indeterminate' class and either the on or off class based on the checked attribute.
          * @param {ToggleState} state The state of the toggle element.
          */
-        /*******  9e620de0-7e60-44a0-b26d-be36099794af  *******/
         DOMBuilder.prototype.updateToggleByValue = function (state) {
             this.toggle.classList.remove(this.onStyle, this.offStyle, "off", "indeterminate");
             switch (state.value) {
@@ -383,6 +454,45 @@
                     this.invCheckbox.name = this.name;
             }
         };
+        /**
+         * Updates the aria attributes of the toggle element based on the provided state.
+         * Sets aria-checked to "mixed" if the state is indeterminate, otherwise sets it to the string representation of the state's checked attribute.
+         * Sets aria-disabled to the string representation of whether the state's status is disabled.
+         * Sets aria-readonly to the string representation of whether the state's status is readonly.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        DOMBuilder.prototype.updateAria = function (state) {
+            if (state.indeterminate) {
+                this.toggle.setAttribute("aria-checked", "mixed");
+            }
+            else {
+                this.toggle.setAttribute("aria-checked", String(state.checked));
+            }
+            this.toggle.setAttribute("aria-disabled", String(state.status === ToggleStateStatus.DISABLED));
+            this.toggle.setAttribute("aria-readonly", String(state.status === ToggleStateStatus.READONLY));
+        };
+        /**
+         * Updates the tooltip of the toggle element based on the provided state.
+         * Sets the content of the tooltip to the corresponding label based on the state's value.
+         * If the tooltip or tooltipLabels are not set, does nothing.
+         * @param {ToggleState} state The state of the toggle element.
+         */
+        DOMBuilder.prototype.updateTooltip = function (state) {
+            if (!this.tooltip || !this.tooltipLabels)
+                return;
+            switch (state.value) {
+                case ToggleStateValue.ON:
+                    this.tooltip.setContent({ ".tooltip-inner": this.tooltipLabels.on });
+                    return;
+                case ToggleStateValue.OFF:
+                    this.tooltip.setContent({ ".tooltip-inner": this.tooltipLabels.off });
+                    return;
+                case ToggleStateValue.INDETERMINATE:
+                    if (this.tooltipLabels.mixed)
+                        this.tooltip.setContent({ ".tooltip-inner": this.tooltipLabels.mixed });
+                    return;
+            }
+        };
         Object.defineProperty(DOMBuilder.prototype, "root", {
             /**
            * Returns the root element of the toggle, which is the container of all toggle elements.
@@ -401,6 +511,11 @@
        */
         DOMBuilder.prototype.destroy = function () {
             var _a, _b;
+            this.cancelPendingAnimationFrame();
+            if (this.tooltip) {
+                this.tooltip.dispose();
+                this.tooltip = undefined;
+            }
             (_a = this.toggle.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.checkbox, this.toggle);
             this.toggle.remove();
             (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
@@ -410,9 +525,38 @@
         return DOMBuilder;
     }());
 
-    function sanitize(text) {
+    var SanitizeMode;
+    (function (SanitizeMode) {
+        SanitizeMode["HTML"] = "HTML";
+        SanitizeMode["TEXT"] = "TEXT";
+    })(SanitizeMode || (SanitizeMode = {}));
+    /**
+     * Sanitizes a given text string according to the provided options.
+     * If the input text is null, it will return null.
+     * If the input text is not null, it will sanitize the text according to the provided mode.
+     * If the mode is HTML, it will sanitize the text using the sanitizeHTML function.
+     * If the mode is TEXT, it will sanitize the text using the sanitizeText function.
+     * @param text The text string to sanitize.
+     * @param opts The options to use for sanitizing the text.
+     * @return The sanitized text string, or null if the input text was null.
+     */
+    function sanitize(text, opts) {
         if (!text)
             return text;
+        switch (opts.mode) {
+            case SanitizeMode.HTML:
+                return sanitizeHTML(text);
+            case SanitizeMode.TEXT:
+                return sanitizeText(text);
+        }
+    }
+    /**
+     * Sanitizes a given text string, replacing special characters with their HTML entities.
+     * If the input text is null, it will return null.
+     * @param text The text string to sanitize.
+     * @return The sanitized text string, or null if the input text was null.
+     */
+    function sanitizeText(text) {
         var map = {
             "&": "&",
             "<": "&lt;",
@@ -424,6 +568,96 @@
         // Using replace with regex for single-pass character mapping compatible with ES5
         return text.replace(/[&<>"'/]/g, function (m) { return map[m]; });
     }
+    /**
+     * Sanitizes HTML content using an allow-list approach to prevent XSS attacks.
+     *
+     * @param html The HTML string to sanitize
+     * @param options Configuration options for allowed tags and attributes
+     * @returns Sanitized HTML string
+     */
+    function sanitizeHTML(html) {
+        var config = {
+            allowedTags: ["b", "i", "strong", "em", "span", "small", "sup", "sub", "img"],
+            allowedAttributes: ["class", "style", "src", "alt", "title", "data-*"]
+        };
+        // Implementation using DOMParser for browser compatibility
+        var parser = new DOMParser();
+        var doc = parser.parseFromString(html, "text/html");
+        // Sanitize all nodes in the document body
+        var bodyChildren = Array.from(doc.body.childNodes);
+        bodyChildren.forEach(function (node) { return sanitizeNode(node, config); });
+        return doc.body.innerHTML;
+    }
+    /**
+     * Sanitizes a single node in the document tree.
+     *
+     * For element nodes, it removes disallowed tags and attributes.
+     * For text nodes, it keeps them as is.
+     *
+     * Recursively sanitizes all children of an element node.
+     *
+     * @param node The node to sanitize
+     * @param config Configuration options for allowed tags and attributes
+     */
+    function sanitizeNode(node, config) {
+        var sanitizeNodeRecursive = function (node) {
+            var _a;
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                var element_1 = node;
+                var tagName = element_1.tagName.toLowerCase();
+                // Remove disallowed tags
+                if (!config.allowedTags.includes(tagName)) {
+                    // Replace disallowed element with its text content
+                    var fragment_1 = document.createDocumentFragment();
+                    Array.from(element_1.childNodes).forEach(function (child) {
+                        fragment_1.appendChild(child.cloneNode(true));
+                    });
+                    (_a = element_1.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(fragment_1, element_1);
+                    return;
+                }
+                // Remove disallowed attributes
+                Array.from(element_1.attributes).forEach(function (attr) {
+                    var attrName = attr.name.toLowerCase();
+                    var isAllowed = config.allowedAttributes.some(function (allowed) {
+                        return allowed.endsWith("*") ? attrName.startsWith(allowed.slice(0, -1)) : attrName === allowed;
+                    });
+                    if (isAllowed) {
+                        sanitizeAllowedAttr(element_1, attr, attrName);
+                    }
+                    else {
+                        element_1.removeAttribute(attr.name);
+                    }
+                });
+                // Recursively sanitize children
+                var children = Array.from(element_1.childNodes);
+                children.forEach(sanitizeNodeRecursive);
+            }
+            else if (node.nodeType === Node.TEXT_NODE) {
+                // Text nodes are safe, keep them as is
+                return;
+            }
+        };
+        sanitizeNodeRecursive(node);
+    }
+    /**
+     * Sanitizes an allowed attribute by removing it if its value is a dangerous protocol.
+     * Only works for "src" and "href" attributes.
+     * @param element The element to check for the attribute.
+     * @param attr The attribute to check the value of.
+     * @param attrName The name of the attribute to check (either "src" or "href").
+     */
+    function sanitizeAllowedAttr(element, attr, attrName) {
+        if (attrName !== "src" && attrName !== "href")
+            return;
+        var value = attr.value.toLowerCase();
+        // sonar typescript:S1523 - This is security detection, not execution
+        var isDangerousProtocol = value.startsWith("javascript:") ||
+            value.startsWith("vbscript:") ||
+            (value.startsWith("data:") && !value.startsWith("data:image/"));
+        if (isDangerousProtocol) {
+            element.removeAttribute(attr.name);
+        }
+    }
     /**
      * Checks if the given string is a valid numeric value.
      *
@@ -440,6 +674,14 @@
         return /^[+-]?\d+(\.\d+)?$/.test(value.toString().trim());
     }
 
+    var PlacementOptions;
+    (function (PlacementOptions) {
+        PlacementOptions["TOP"] = "top";
+        PlacementOptions["BOTTOM"] = "bottom";
+        PlacementOptions["LEFT"] = "left";
+        PlacementOptions["RIGHT"] = "right";
+    })(PlacementOptions || (PlacementOptions = {}));
+
     /**
      * OptionResolver is responsible for reading HTML attributes and user options
      * to build a complete ToggleOptions object.
@@ -453,13 +695,13 @@
        * @param element HTMLInputElement to read
        * @param attrName Attribute name
        * @param options method options
-       * @param options.sanitized Flag to indicate if the attribute value needs to be sanitized (default: `true`)
+       * @param options.sanitized Flag to indicate if the sanitized mode needs to be used (default: `TEXT`)
        * @returns Sanitized attribute value or null
        */
         OptionResolver.getAttr = function (element, attrName, opts) {
-            var _a = (opts !== null && opts !== void 0 ? opts : {}).sanitized, sanitized = _a === void 0 ? true : _a;
+            var _a = (opts !== null && opts !== void 0 ? opts : {}).sanitized, sanitized = _a === void 0 ? SanitizeMode.TEXT : _a;
             var value = element.getAttribute(attrName);
-            return sanitized ? sanitize(value) : value;
+            return sanitize(value, { mode: sanitized });
         };
         /**
        * Returns the value of an attribute, user-provided value, or default value
@@ -467,25 +709,29 @@
        * @param attrName Attribute name
        * @param userValue Value provided by the user
        * @param defaultValue Default value if neither attribute nor user value exists
-       * @param sanitized Flag to indicate if the attribute value needs to be sanitized (default: {@code true})
+       * @param sanitized Flag to indicate if the sanitized mode needs to be used (default: `TEXT`)
        * @returns Final attribute value
        */
         OptionResolver.getAttrOrDefault = function (element, attrName, userValue, defaultValue, sanitized) {
-            if (sanitized === void 0) { sanitized = true; }
-            return OptionResolver.getAttr(element, attrName, { sanitized: sanitized }) || userValue || defaultValue;
+            if (sanitized === void 0) { sanitized = SanitizeMode.TEXT; }
+            var sanitizedUserValue = typeof userValue === "string" ? sanitize(userValue, { mode: sanitized }) : userValue;
+            return OptionResolver.getAttr(element, attrName, { sanitized: sanitized }) ||
+                sanitizedUserValue ||
+                defaultValue;
         };
         /**
        * Returns the value of an attribute, user-provided value, or marks as deprecated
        * @param element HTMLInputElement to read
        * @param attrName Attribute name
        * @param userValue Value provided by the user
-       * @param sanitized Flag to indicate if the attribute value needs to be sanitized (default: {@code true})
+       * @param sanitized Flag to indicate if the sanitized mode needs to be used (default: `TEXT`)
        * @returns Final attribute value or DeprecationConfig.value if not found
        */
         OptionResolver.getAttrOrDeprecation = function (element, attrName, userValue, sanitized) {
-            if (sanitized === void 0) { sanitized = true; }
+            if (sanitized === void 0) { sanitized = SanitizeMode.TEXT; }
+            var sanitizedUserValue = typeof userValue === "string" ? sanitize(userValue, { mode: sanitized }) : userValue;
             return OptionResolver.getAttr(element, attrName, { sanitized: sanitized }) ||
-                userValue ||
+                sanitizedUserValue ||
                 DeprecationConfig.value;
         };
         /**
@@ -495,10 +741,11 @@
        * @returns Complete ToggleOptions object
        */
         OptionResolver.resolve = function (element, userOptions) {
+            var _a;
             if (userOptions === void 0) { userOptions = {}; }
             var options = {
-                onlabel: this.getAttrOrDeprecation(element, "data-onlabel", userOptions.onlabel, false),
-                offlabel: this.getAttrOrDeprecation(element, "data-offlabel", userOptions.offlabel, false),
+                onlabel: this.getAttrOrDeprecation(element, "data-onlabel", userOptions.onlabel, SanitizeMode.HTML),
+                offlabel: this.getAttrOrDeprecation(element, "data-offlabel", userOptions.offlabel, SanitizeMode.HTML),
                 onstyle: this.getAttrOrDefault(element, "data-onstyle", userOptions.onstyle, OptionResolver.DEFAULT.onstyle),
                 offstyle: this.getAttrOrDefault(element, "data-offstyle", userOptions.offstyle, OptionResolver.DEFAULT.offstyle),
                 onvalue: this.getAttr(element, "value") || this.getAttrOrDefault(element, "data-onvalue", userOptions.onvalue, OptionResolver.DEFAULT.onvalue),
@@ -516,6 +763,10 @@
                     userOptions.tristate ||
                     OptionResolver.DEFAULT.tristate,
                 name: this.getAttrOrDefault(element, "name", userOptions.name, this.DEFAULT.name),
+                aria: {
+                    label: this.getAttrOrDefault(element, "aria-label", (_a = userOptions.aria) === null || _a === void 0 ? void 0 : _a.label, this.DEFAULT.aria.label),
+                },
+                tooltip: OptionResolver.resolveTooltipOptions(element, userOptions),
             };
             if (options.width && isNumeric(options.width))
                 options.width = "".concat(options.width, "px");
@@ -524,6 +775,31 @@
             DeprecationConfig.handle(options, element, userOptions);
             return options;
         };
+        /**
+         * Resolve tooltip options from element attributes and user options.
+         * @param element HTMLInputElement representing the toggle
+         * @param userOptions Options provided by the user
+         * @returns Resolved tooltip options or undefined if not found.
+         */
+        OptionResolver.resolveTooltipOptions = function (element, userOptions) {
+            var _this = this;
+            var _a, _b, _c, _d;
+            var getTitle = function (attr, userOption) { return _this.getAttrOrDefault(element, attr, userOption, null, SanitizeMode.HTML) || _this.getAttr(element, "data-tooltip-title", { sanitized: SanitizeMode.HTML }); };
+            var titleOn = getTitle("data-tooltip-title-on", (_a = userOptions.tooltip) === null || _a === void 0 ? void 0 : _a.title.on);
+            var titleOff = getTitle("data-tooltip-title-off", (_b = userOptions.tooltip) === null || _b === void 0 ? void 0 : _b.title.off);
+            var titleMixed = getTitle("data-tooltip-title-mixed", (_c = userOptions.tooltip) === null || _c === void 0 ? void 0 : _c.title.mixed);
+            if (!titleOn || !titleOff)
+                return OptionResolver.DEFAULT.tooltip;
+            var placement = this.getAttrOrDefault(element, "data-tooltip-placement", (_d = userOptions.tooltip) === null || _d === void 0 ? void 0 : _d.placement, PlacementOptions.TOP);
+            return {
+                placement: Object.values(PlacementOptions).includes(placement) ? placement : PlacementOptions.TOP,
+                title: {
+                    on: titleOn,
+                    off: titleOff,
+                    mixed: titleMixed !== null && titleMixed !== void 0 ? titleMixed : undefined,
+                },
+            };
+        };
         /** Default values for all toggle options */
         OptionResolver.DEFAULT = {
             onlabel: "On",
@@ -541,6 +817,8 @@
             tabindex: 0,
             tristate: false,
             name: null,
+            aria: { label: "Toggle", },
+            tooltip: undefined,
         };
         return OptionResolver;
     }());
@@ -565,9 +843,9 @@
         DeprecationConfig.handle = function (options, element, userOptions) {
             var _this = this;
             this.deprecatedOptions.forEach(function (_a) {
-                var currentOpt = _a.currentOpt, deprecatedAttr = _a.deprecatedAttr, deprecatedOpt = _a.deprecatedOpt;
+                var currentOpt = _a.currentOpt, deprecatedAttr = _a.deprecatedAttr, deprecatedOpt = _a.deprecatedOpt, mode = _a.mode;
                 if (options[currentOpt] === DeprecationConfig.value) {
-                    var deprecatedAttrSanitized = sanitize(element.getAttribute(deprecatedAttr));
+                    var deprecatedAttrSanitized = sanitize(element.getAttribute(deprecatedAttr), { mode: mode });
                     if (deprecatedAttrSanitized) {
                         _this.log(OptionType.ATTRIBUTE, deprecatedAttr, "data-".concat(currentOpt));
                         options[currentOpt] = deprecatedAttrSanitized;
@@ -599,11 +877,13 @@
                 currentOpt: "onlabel",
                 deprecatedAttr: "data-on",
                 deprecatedOpt: "on",
+                mode: SanitizeMode.HTML
             },
             {
                 currentOpt: "offlabel",
                 deprecatedAttr: "data-off",
                 deprecatedOpt: "off",
+                mode: SanitizeMode.HTML
             },
         ];
         return DeprecationConfig;
@@ -814,6 +1094,17 @@
         return StateReducer;
     }());
 
+    var ToggleEvents;
+    (function (ToggleEvents) {
+        ToggleEvents["ON"] = "toggle:on";
+        ToggleEvents["OFF"] = "toggle:off";
+        ToggleEvents["MIXED"] = "toggle:mixed";
+        ToggleEvents["ENABLED"] = "toggle:enabled";
+        ToggleEvents["DISABLED"] = "toggle:disabled";
+        ToggleEvents["READONLY"] = "toggle:readonly";
+    })(ToggleEvents || (ToggleEvents = {}));
+    var ToggleEvents$1 = ToggleEvents;
+
     var Toggle = /** @class */ (function () {
         /**
        * Initializes a new instance of the BootstrapToggle class.
@@ -834,7 +1125,7 @@
              * of the toggle changes its state and triggering the update method to keep the toggle in sync.
              */
             this.onExternalChange = function () {
-                _this.update(true);
+                _this.update();
             };
             this.onFormReset = function () {
                 setTimeout(function () { return _this.onExternalChange(); }, 0);
@@ -912,7 +1203,7 @@
                 _this.domBuilder.root.removeEventListener("pointercancel", _this.onPointerCancel);
             };
             this.handlerKeyboardEvent = function (e) {
-                if (e.key == " ") {
+                if (e.key === " " || e.key === "Enter") {
                     _this.apply(ToggleActionType.NEXT);
                 }
             };
@@ -1050,24 +1341,24 @@
             this.domBuilder.root.removeEventListener("pointerdown", this.onPointerDown);
         };
         /**
-       * Binds a keypress event listener to the root element of the toggle.
-       * The event listener is responsible for handling keypress events
-       * and triggering the toggle's state change when a keypress event occurs.
+       * Binds a keydown event listener to the root element of the toggle.
+       * The event listener is responsible for handling keydown events
+       * and triggering the toggle's state change when a keydown event occurs.
        * The event listener is bound with the passive option, which means that it will not block
        * other event listeners from being triggered.
        */
         Toggle.prototype.bindKeyboardEventListener = function () {
-            this.domBuilder.root.addEventListener("keypress", this.handlerKeyboardEvent, { passive: true });
+            this.domBuilder.root.addEventListener("keydown", this.handlerKeyboardEvent, { passive: true });
         };
         /**
-       * Unbinds the keypress event listener from the root element of the toggle.
-       * This method is responsible for unbinding the keypress event listener that was
+       * Unbinds the keydown event listener from the root element of the toggle.
+       * This method is responsible for unbinding the keydown event listener that was
        * previously bound by the bindKeyboardEventListener method.
        * If the event listener is not bound (i.e. this.eventsBound is false), this method does nothing.
        * @returns void
        */
         Toggle.prototype.unbindKeyboardEventListener = function () {
-            this.domBuilder.root.removeEventListener("keypress", this.handlerKeyboardEvent);
+            this.domBuilder.root.removeEventListener("keydown", this.handlerKeyboardEvent);
         };
         /**
        * Binds a click event listener to all labels that are associated with the toggle's input element.
@@ -1118,9 +1409,10 @@
                 return;
             this.suppressExternalSync = true;
             try {
-                this.domBuilder.render(this.stateReducer.get());
+                var state = this.stateReducer.get();
+                this.domBuilder.render(state);
                 if (!silent)
-                    this.trigger();
+                    this.trigger(action, state);
             }
             finally {
                 this.suppressExternalSync = false;
@@ -1201,31 +1493,75 @@
             this.apply(ToggleActionType.READONLY);
         };
         /**
-       * Synchronizes the toggle state with the input element and renders the toggle.
-       * If the silent parameter is false, this method will also trigger the change event.
-       * @param {boolean} silent A boolean indicating whether to trigger the change event after synchronizing the toggle state.
-       */
-        Toggle.prototype.update = function (silent) {
+         * Synchronizes the toggle state with the input element and renders the toggle.
+         */
+        Toggle.prototype.update = function () {
             this.suppressExternalSync = true;
             try {
                 this.stateReducer.sync(this.element);
                 this.domBuilder.render(this.stateReducer.get());
-                if (!silent)
-                    this.trigger();
             }
             finally {
                 this.suppressExternalSync = false;
             }
         };
         /**
-       * Triggers the change event on the toggle's input element.
-       * @param {boolean} silent A boolean indicating whether to trigger the change event.
-       * If the silent parameter is false, this method will trigger the change event.
-       */
-        Toggle.prototype.trigger = function (silent) {
-            if (silent === void 0) { silent = false; }
-            if (!silent)
-                this.element.dispatchEvent(new Event("change", { bubbles: true }));
+         * Triggers the change event on the toggle's input element and the appropriate toggle event.
+         * This method is called after a toggle action is applied to notify listeners of the state change.
+         * @param {ToggleActionType} action The toggle action that was applied.
+         * @param {ToggleState} state The state of the toggle once the action was applied.
+         */
+        Toggle.prototype.trigger = function (action, state) {
+            this.element.dispatchEvent(new Event("change", { bubbles: true }));
+            var eventName = this.getEventForAction(action, state);
+            var detail = { state: state };
+            this.element.dispatchEvent(new CustomEvent(eventName, {
+                bubbles: true,
+                detail: detail
+            }));
+        };
+        /**
+         * Returns the corresponding toggle event for the given toggle action and state.
+         * This method is used to determine which toggle event to trigger after a toggle action is applied.
+         * @param {ToggleActionType} action The toggle action that was applied.
+         * @param {ToggleState} state The previous state of the toggle before the action was applied.
+         * @returns {ToggleEvents} The corresponding toggle event for the given toggle action and state.
+         */
+        Toggle.prototype.getEventForAction = function (action, state) {
+            switch (action) {
+                case ToggleActionType.ON:
+                    return ToggleEvents$1.ON;
+                case ToggleActionType.OFF:
+                    return ToggleEvents$1.OFF;
+                case ToggleActionType.INDETERMINATE:
+                    return ToggleEvents$1.MIXED;
+                case ToggleActionType.ENABLE:
+                    return ToggleEvents$1.ENABLED;
+                case ToggleActionType.DISABLE:
+                    return ToggleEvents$1.DISABLED;
+                case ToggleActionType.READONLY:
+                    return ToggleEvents$1.READONLY;
+                case ToggleActionType.DETERMINATE:
+                case ToggleActionType.TOGGLE:
+                case ToggleActionType.NEXT:
+                    return this.getValueEvent(state);
+            }
+        };
+        /**
+         * Returns the corresponding toggle event for the given toggle state.
+         * This method is used to determine which toggle event to trigger after a toggle action is applied.
+         * @param {ToggleState} state The previous state of the toggle before the action was applied.
+         * @returns {ToggleEvents} The corresponding toggle event for the given toggle state.
+         */
+        Toggle.prototype.getValueEvent = function (state) {
+            switch (state.value) {
+                case ToggleStateValue.ON:
+                    return ToggleEvents$1.ON;
+                case ToggleStateValue.OFF:
+                    return ToggleEvents$1.OFF;
+                case ToggleStateValue.INDETERMINATE:
+                    return ToggleEvents$1.MIXED;
+            }
         };
         /**
        * Destroys the toggle element and unbinds all event listeners.