@aurodesignsystem-dev/auro-button 0.0.0-pr356.0

package/demo/api.min.js

@@ -0,0 +1,66 @@
+import { A as AuroButton } from './auro-button.min.js';
+
+function roundedRightAlignExample() {
+  const rightAlignElem = document.querySelector("#rightAlignElem");
+
+  // The mouseover and mouseout events are to simulate toggling text for mouse users
+  rightAlignElem.addEventListener("mouseover", () => {
+    rightAlignElem.shape = "pill";
+  });
+
+  rightAlignElem.addEventListener("mouseout", () => {
+    rightAlignElem.shape = "circle";
+  });
+
+  // The focusin and focusout events are to simulate toggling text for keyboard users
+  rightAlignElem.addEventListener("focusin", () => {
+    rightAlignElem.shape = "pill";
+  });
+
+  rightAlignElem.addEventListener("focusout", () => {
+    rightAlignElem.shape = "circle";
+  });
+}
+
+function toggledTextExample() {
+  const toggledTextElem = document.querySelector("#toggledTextElem");
+
+  // The mouseover and mouseout events are to simulate toggling text for mouse users
+  toggledTextElem.addEventListener("mouseover", () => {
+    toggledTextElem.shape = "pill";
+  });
+
+  toggledTextElem.addEventListener("mouseout", () => {
+    toggledTextElem.shape = "circle";
+  });
+
+  // The focusin and focusout events are to simulate toggling text for keyboard users
+  toggledTextElem.addEventListener("focusin", () => {
+    toggledTextElem.shape = "pill";
+  });
+
+  toggledTextElem.addEventListener("focusout", () => {
+    toggledTextElem.shape = "circle";
+  });
+}
+
+AuroButton.register();
+
+function initExamples(initCount) {
+  // biome-ignore lint: no-unused-vars
+  initCount = initCount || 0;
+
+  try {
+    toggledTextExample();
+    roundedRightAlignExample();
+  } catch {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };