@aurodesignsystem/auro-dialog 4.2.0 → 4.2.1

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-
 import type { AuroDialog } from "src/auro-dialog.js";
 import type { ComponentBase } from "src/componentBase.js";
 
@@ -22,13 +21,14 @@ import type { ComponentBase } from "src/componentBase.js";
  */
 export type ScopedElements<
   Prefix extends string = "",
-  Suffix extends string = ""
+  Suffix extends string = "",
 > = {
-  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+  [
+    Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`
+  ]: CustomElements[Key];
 };
 
 type BaseProps<T extends HTMLElement> = {
-
   /** Content added between the opening and closing tags of the element */
   children?: any;
   /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
@@ -51,6 +51,8 @@ type BaseProps<T extends HTMLElement> = {
   key?: string | number;
   /** Specifies the language of the element. */
   lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string;
   /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
   part?: string;
   /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -71,163 +73,261 @@ type BaseProps<T extends HTMLElement> = {
   popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
   /** Specifies the action to be performed on a popover element being controlled by a control element. */
   popovertargetaction?: "show" | "hide" | "toggle";
-
-} ;
-
-type BaseEvents = {
-
-
 };
 
-
+type BaseEvents = {};
 
 export type AuroDialogProps = {
   /** Defines whether the close button should be light colored for use on dark backgrounds. */
-  "close-button-appearance"?: AuroDialog['closeButtonAppearance'];
+  "close-button-appearance"?: AuroDialog["closeButtonAppearance"];
   /** Defines whether the close button should be light colored for use on dark backgrounds. */
-  "closeButtonAppearance"?: AuroDialog['closeButtonAppearance'];
+  closeButtonAppearance?: AuroDialog["closeButtonAppearance"];
   /** If true, the dialog bib is in fullscreen mode. */
-  "isBibFullscreen"?: AuroDialog['isBibFullscreen'];
+  isBibFullscreen?: AuroDialog["isBibFullscreen"];
   /** Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
 Must be used in conjunction with sm or md to have an effect. */
-  "lg"?: AuroDialog['lg'];
+  lg?: AuroDialog["lg"];
   /** Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. */
-  "md"?: AuroDialog['md'];
+  md?: AuroDialog["md"];
   /** Modal dialog restricts the user to take an action (no default close actions). */
-  "modal"?: AuroDialog['modal'];
+  modal?: AuroDialog["modal"];
   /** DEPRECATED - use `close-button-appearance="inverse" instead. */
-  "onDark"?: AuroDialog['onDark'];
+  onDark?: AuroDialog["onDark"];
   /** Sets state of dialog to open. */
-  "open"?: AuroDialog['isPopoverVisible'];
+  open?: AuroDialog["isPopoverVisible"];
   /** Sets state of dialog to open. */
-  "isPopoverVisible"?: AuroDialog['isPopoverVisible'];
+  isPopoverVisible?: AuroDialog["isPopoverVisible"];
   /** Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. */
-  "sm"?: AuroDialog['sm'];
+  sm?: AuroDialog["sm"];
   /** Unformatted dialog window, edge-to-edge fill for content. */
-  "unformatted"?: AuroDialog['unformatted'];
+  unformatted?: AuroDialog["unformatted"];
   /** The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. */
-  "triggerElement"?: AuroDialog['triggerElement'];
+  triggerElement?: AuroDialog["triggerElement"];
 
   /** Event fires when the element is closed */
-  "ontoggle"?: (e: CustomEvent<never>) => void;
-}
-
+  ontoggle?: (e: Event) => void;
+};
 
-  export type CustomElements = {
+export type AuroDialogSolidJsProps = {
+  /** Defines whether the close button should be light colored for use on dark backgrounds. */
+  "attr:close-button-appearance"?: AuroDialog["closeButtonAppearance"];
+  /** Defines whether the close button should be light colored for use on dark backgrounds. */
+  "prop:closeButtonAppearance"?: AuroDialog["closeButtonAppearance"];
+  /** If true, the dialog bib is in fullscreen mode. */
+  "prop:isBibFullscreen"?: AuroDialog["isBibFullscreen"];
+  /** Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
+Must be used in conjunction with sm or md to have an effect. */
+  "prop:lg"?: AuroDialog["lg"];
+  /** Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. */
+  "prop:md"?: AuroDialog["md"];
+  /** Modal dialog restricts the user to take an action (no default close actions). */
+  "prop:modal"?: AuroDialog["modal"];
+  /** DEPRECATED - use `close-button-appearance="inverse" instead. */
+  "prop:onDark"?: AuroDialog["onDark"];
+  /** Sets state of dialog to open. */
+  "bool:open"?: AuroDialog["isPopoverVisible"];
+  /** Sets state of dialog to open. */
+  "prop:isPopoverVisible"?: AuroDialog["isPopoverVisible"];
+  /** Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. */
+  "prop:sm"?: AuroDialog["sm"];
+  /** Unformatted dialog window, edge-to-edge fill for content. */
+  "prop:unformatted"?: AuroDialog["unformatted"];
+  /** The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. */
+  "prop:triggerElement"?: AuroDialog["triggerElement"];
+  /** Event fires when the element is closed */
+  "on:toggle"?: (e: Event) => void;
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
+export type CustomElements = {
   /**
-     * The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `close-button-appearance`/`closeButtonAppearance`: Defines whether the close button should be light colored for use on dark backgrounds. 
- * - `isBibFullscreen`: If true, the dialog bib is in fullscreen mode. 
- * - `lg`: Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
- * Must be used in conjunction with sm or md to have an effect. 
- * - `md`: Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. 
- * - `modal`: Modal dialog restricts the user to take an action (no default close actions). 
- * - `onDark`: DEPRECATED - use `close-button-appearance="inverse" instead. 
- * - `open`/`isPopoverVisible`: Sets state of dialog to open. 
- * - `sm`: Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. 
- * - `unformatted`: Unformatted dialog window, edge-to-edge fill for content. 
- * - `behavior`: undefined (property only) (readonly)
- * - `open`: undefined (property only)
- * - `triggerElement`: The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. (property only)
- * 
- * ## Events
- * 
- * Events that will be emitted by the component.
- * 
- * - `toggle`: Event fires when the element is closed
- * 
- * ## Slots
- * 
- * Areas where markup can be added to the component.
- * 
- * - `ariaLabel.dialog.close`: Text to describe the "x" icon close button for screen readers. Default: "Close".
- * - `content`: Injects content into the body of the modal
- * - `footer`: Used for action options, e.g. buttons
- * - `header`: Text to display as the header of the modal
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `_initializeDefaults() => void`: undefined
- * - `hide() => void`: Closes the dialog.
- * - `register(name?: string = "auro-dialog") => void`: This will register this element with the browser.
- * - `show() => void`: Opens the dialog.
- * 
- * ## CSS Parts
- * 
- * Custom selectors for styling elements within the component.
- * 
- * - `close-button`: adjust position of the close X icon in the dialog window
- * - `dialog`: apply CSS to the entire dialog
- * - `dialog-content`: apply CSS to the content of the dialog
- * - `dialog-footer`: apply CSS to the footer of the dialog
- * - `dialog-header`: apply CSS to the header of the dialog
- * - `dialog-overlay`: DEPRECATED. Use `--ds-auro-dialog-overlay-modal-background-color` or `--ds-auro-dialog-overlay-open-background-color` for backdrop styling instead.
-  */
-    "auro-dialog": Partial<AuroDialogProps & BaseProps<AuroDialog> & BaseEvents>;
+   * The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `close-button-appearance`/`closeButtonAppearance`: Defines whether the close button should be light colored for use on dark backgrounds.
+   * - `isBibFullscreen`: If true, the dialog bib is in fullscreen mode.
+   * - `lg`: Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
+   * Must be used in conjunction with sm or md to have an effect.
+   * - `md`: Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
+   * - `modal`: Modal dialog restricts the user to take an action (no default close actions).
+   * - `onDark`: DEPRECATED - use `close-button-appearance="inverse" instead.
+   * - `open`/`isPopoverVisible`: Sets state of dialog to open.
+   * - `sm`: Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
+   * - `unformatted`: Unformatted dialog window, edge-to-edge fill for content.
+   * - `behavior`: undefined (property only) (readonly)
+   * - `open`: undefined (property only)
+   * - `triggerElement`: The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `toggle`: Event fires when the element is closed
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `ariaLabel.dialog.close`: Text to describe the "x" icon close button for screen readers. Default: "Close".
+   * - `content`: Injects content into the body of the modal
+   * - `footer`: Used for action options, e.g. buttons
+   * - `header`: Text to display as the header of the modal
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `_initializeDefaults() => void`: undefined
+   * - `hide() => void`: Closes the dialog.
+   * - `register(name?: string = "auro-dialog") => void`: This will register this element with the browser.
+   * - `show() => void`: Opens the dialog.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `close-button`: adjust position of the close X icon in the dialog window
+   * - `dialog`: apply CSS to the entire dialog
+   * - `dialog-content`: apply CSS to the content of the dialog
+   * - `dialog-footer`: apply CSS to the footer of the dialog
+   * - `dialog-header`: apply CSS to the header of the dialog
+   * - `dialog-overlay`: DEPRECATED. Use `--ds-auro-dialog-overlay-modal-background-color` or `--ds-auro-dialog-overlay-open-background-color` for backdrop styling instead.
+   */
+  "auro-dialog": Partial<AuroDialogProps & BaseProps<AuroDialog> & BaseEvents>;
+};
 
-  }
+export type CustomElementsSolidJs = {
+  /**
+   * The `auro-dialog` appears on top of the page and presents information that requires the users immediate attention.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `close-button-appearance`/`closeButtonAppearance`: Defines whether the close button should be light colored for use on dark backgrounds.
+   * - `isBibFullscreen`: If true, the dialog bib is in fullscreen mode.
+   * - `lg`: Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
+   * Must be used in conjunction with sm or md to have an effect.
+   * - `md`: Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
+   * - `modal`: Modal dialog restricts the user to take an action (no default close actions).
+   * - `onDark`: DEPRECATED - use `close-button-appearance="inverse" instead.
+   * - `open`/`isPopoverVisible`: Sets state of dialog to open.
+   * - `sm`: Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
+   * - `unformatted`: Unformatted dialog window, edge-to-edge fill for content.
+   * - `behavior`: undefined (property only) (readonly)
+   * - `open`: undefined (property only)
+   * - `triggerElement`: The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `toggle`: Event fires when the element is closed
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `ariaLabel.dialog.close`: Text to describe the "x" icon close button for screen readers. Default: "Close".
+   * - `content`: Injects content into the body of the modal
+   * - `footer`: Used for action options, e.g. buttons
+   * - `header`: Text to display as the header of the modal
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `_initializeDefaults() => void`: undefined
+   * - `hide() => void`: Closes the dialog.
+   * - `register(name?: string = "auro-dialog") => void`: This will register this element with the browser.
+   * - `show() => void`: Opens the dialog.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `close-button`: adjust position of the close X icon in the dialog window
+   * - `dialog`: apply CSS to the entire dialog
+   * - `dialog-content`: apply CSS to the content of the dialog
+   * - `dialog-footer`: apply CSS to the footer of the dialog
+   * - `dialog-header`: apply CSS to the header of the dialog
+   * - `dialog-overlay`: DEPRECATED. Use `--ds-auro-dialog-overlay-modal-background-color` or `--ds-auro-dialog-overlay-open-background-color` for backdrop styling instead.
+   */
+  "auro-dialog": Partial<
+    AuroDialogProps &
+      AuroDialogSolidJsProps &
+      BaseProps<AuroDialog> &
+      BaseEvents
+  >;
+};
 
-export type CustomCssProperties = {
+export type CustomCssProperties = {};
 
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
 }
 
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
 
-declare module 'react' {
+declare module "react/jsx-dev-runtime" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module 'preact' {
+declare module "preact" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module '@builder.io/qwik' {
+declare module "@builder.io/qwik" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module '@stencil/core' {
+declare module "@stencil/core" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module 'hono/jsx' {
+declare module "hono/jsx" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 
-declare module 'react-native' {
+declare module "react-native" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
+}
+
+declare module "solid-js" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElementsSolidJs {}
+  }
 }
 
 declare global {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
-  
 }
 declare global {
   namespace svelteHTML {

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroDialog}from"./auro-dialog-CWkXz5VA.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";
+export{A as AuroDialog}from"./auro-dialog-T9I85UZL.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as i}from"./auro-dialog-CWkXz5VA.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";i.register();
+import{A as i}from"./auro-dialog-T9I85UZL.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";i.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-dialog",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "auro-dialog HTML custom element",
   "repository": {
     "type": "git",
@@ -21,16 +21,16 @@
     "node": ">=20"
   },
   "dependencies": {
-    "lit": "^3.3.1"
+    "lit": "^3.3.3"
   },
   "devDependencies": {
     "@aurodesignsystem/auro-button": "^12.3.2",
-    "@aurodesignsystem/auro-cli": "^3.6.0",
+    "@aurodesignsystem/auro-cli": "^3.7.1",
     "@aurodesignsystem/auro-config": "^1.3.1",
     "@aurodesignsystem/auro-icon": "^9.2.0",
-    "@aurodesignsystem/auro-library": "^5.12.3",
-    "@aurodesignsystem/design-tokens": "^8.18.0",
-    "@aurodesignsystem/webcorestylesheets": "^11.0.0",
+    "@aurodesignsystem/auro-library": "^5.13.3",
+    "@aurodesignsystem/design-tokens": "^9.3.2",
+    "@aurodesignsystem/webcorestylesheets": "^11.1.3",
     "husky": "^9.1.7"
   },
   "browserslist": [

package/demo/api.min.js

@@ -1,219 +0,0 @@
-import { A as AuroDialog, i as initBasicExample } from './auro-dialog.min.js';
-
-function initAccessibilityExample() {
-  const button = document.querySelector("#openAccessibility");
-  const dialog = document.querySelector("#unformattedMdDialog");
-
-  button.addEventListener("click", () => {
-    if (dialog.hasAttribute("open")) {
-      dialog.removeAttribute("open");
-    } else {
-      dialog.setAttribute("open", true);
-    }
-  });
-}
-
-function initDecoupledExample() {
-  const smLgButtons = [
-    document.querySelector("#openSmLg"),
-    document.querySelector("#closeSmLg"),
-  ];
-  const smLgDialog = document.querySelector("#smLgDialog");
-
-  const mdLgButtons = [
-    document.querySelector("#openMdLg"),
-    document.querySelector("#closeMdLg"),
-  ];
-  const mdLgDialog = document.querySelector("#mdLgDialog");
-
-  smLgButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (smLgDialog.hasAttribute("open")) {
-        smLgDialog.removeAttribute("open");
-      } else {
-        smLgDialog.setAttribute("open", true);
-      }
-    });
-  });
-
-  mdLgButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (mdLgDialog.hasAttribute("open")) {
-        mdLgDialog.removeAttribute("open");
-      } else {
-        mdLgDialog.setAttribute("open", true);
-      }
-    });
-  });
-}
-
-function initEditCloseButtonExample() {
-  const button = document.querySelector("#openEditDialog");
-  const dialog = document.querySelector("#unformattedCustomMdDialog");
-
-  button.addEventListener("click", () => {
-    if (dialog.hasAttribute("open")) {
-      dialog.removeAttribute("open");
-    } else {
-      dialog.setAttribute("open", true);
-    }
-  });
-}
-
-function initModalExample() {
-  const defaultButtons = [
-    document.querySelector("#openDefaultModal"),
-    document.querySelector("#closeDefaultModal"),
-  ];
-  const defaultDialog = document.querySelector("#defaultModalDialog");
-
-  const mediumButtons = [
-    document.querySelector("#openMediumModal"),
-    document.querySelector("#closeMediumModal"),
-  ];
-  const mediumDialog = document.querySelector("#mediumModalDialog");
-
-  const smallButtons = [
-    document.querySelector("#openSmallModal"),
-    document.querySelector("#closeSmallModal"),
-  ];
-  const smallDialog = document.querySelector("#smallModalDialog");
-
-  defaultButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (defaultDialog.hasAttribute("open")) {
-        defaultDialog.removeAttribute("open");
-      } else {
-        defaultDialog.setAttribute("open", true);
-      }
-    });
-  });
-
-  mediumButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (mediumDialog.hasAttribute("open")) {
-        mediumDialog.removeAttribute("open");
-      } else {
-        mediumDialog.setAttribute("open", true);
-      }
-    });
-  });
-
-  smallButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (smallDialog.hasAttribute("open")) {
-        smallDialog.removeAttribute("open");
-      } else {
-        smallDialog.setAttribute("open", true);
-      }
-    });
-  });
-}
-
-function initPopoverAndDropdownExample() {
-  const buttons = [
-    document.querySelector("#openPopAndDrop"),
-    document.querySelector("#closePopAndDrop"),
-  ];
-  const dialog = document.querySelector("#popover-dialog");
-
-  buttons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (dialog.hasAttribute("open")) {
-        dialog.removeAttribute("open");
-      } else {
-        dialog.setAttribute("open", true);
-      }
-    });
-  });
-}
-
-function initSizeOptionsExample() {
-  const defaultButtons = [
-    document.querySelector("#openDefaultSize"),
-    document.querySelector("#closeDefaultSize"),
-  ];
-  const defaultDialog = document.querySelector("#defaultSizeDialog");
-
-  const mediumButtons = [
-    document.querySelector("#openMediumSize"),
-    document.querySelector("#closeMediumSize"),
-  ];
-  const mediumDialog = document.querySelector("#mediumSizeDialog");
-
-  const smallButtons = [
-    document.querySelector("#openSmallSize"),
-    document.querySelector("#closeSmallSize"),
-  ];
-  const smallDialog = document.querySelector("#smallSizeDialog");
-
-  defaultButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (defaultDialog.hasAttribute("open")) {
-        defaultDialog.removeAttribute("open");
-      } else {
-        defaultDialog.setAttribute("open", true);
-      }
-    });
-  });
-
-  mediumButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (mediumDialog.hasAttribute("open")) {
-        mediumDialog.removeAttribute("open");
-      } else {
-        mediumDialog.setAttribute("open", true);
-      }
-    });
-  });
-
-  smallButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-      if (smallDialog.hasAttribute("open")) {
-        smallDialog.removeAttribute("open");
-      } else {
-        smallDialog.setAttribute("open", true);
-      }
-    });
-  });
-}
-
-function initAriaLabelSlotExample() {
-  const button = document.querySelector("#openAriaLabelSlot");
-  const dialog = document.querySelector("#ariaLabelMdDialog");
-
-  button.addEventListener("click", () => {
-    if (dialog.hasAttribute("open")) {
-      dialog.removeAttribute("open");
-    } else {
-      dialog.setAttribute("open", true);
-    }
-  });
-}
-
-AuroDialog.register();
-
-function initExamples(initCount) {
-  // biome-ignore lint/style/noParameterAssign: legacy error handling
-  initCount = initCount || 0;
-
-  try {
-    initBasicExample();
-    initSizeOptionsExample();
-    initModalExample();
-    initDecoupledExample();
-    initPopoverAndDropdownExample();
-    initEditCloseButtonExample();
-    initAriaLabelSlotExample();
-    initAccessibilityExample();
-  } catch (_err) {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}
-
-export { initExamples };