astro 4.7.1 → 4.8.0

package/dist/runtime/client/dev-toolbar/apps/audit/rules/a11y.js

@@ -208,8 +208,7 @@ const a11y = [
     message: "Element with the `aria-activedescendant` attribute must either have an inherent `tabindex` or declare `tabindex` as an attribute.",
     selector: "[aria-activedescendant]",
     match(element) {
-      if (!element.tabIndex && !element.hasAttribute("tabindex"))
-        return true;
+      if (!element.tabIndex && !element.hasAttribute("tabindex")) return true;
     }
   },
   {
@@ -219,8 +218,7 @@ const a11y = [
     selector: ":is(meta, html, script, style)[role]",
     match(element) {
       for (const attribute of element.attributes) {
-        if (attribute.name.startsWith("aria-"))
-          return true;
+        if (attribute.name.startsWith("aria-")) return true;
       }
     }
   },
@@ -256,10 +254,8 @@ const a11y = [
     selector: "[aria-hidden]",
     match(element) {
       const value = element.getAttribute("aria-hidden");
-      if (!value)
-        return true;
-      if (!["true", "false"].includes(value))
-        return true;
+      if (!value) return true;
+      if (!["true", "false"].includes(value)) return true;
     }
   },
   {
@@ -276,11 +272,9 @@ const a11y = [
     match(element) {
       const hasFor = element.hasAttribute("for");
       const nestedLabellableElement = element.querySelector(`${labellableElements.join(", ")}`);
-      if (!hasFor && !nestedLabellableElement)
-        return true;
+      if (!hasFor && !nestedLabellableElement) return true;
       const innerText = element.innerText.trim();
-      if (innerText === "")
-        return true;
+      if (innerText === "") return true;
     }
   },
   {
@@ -290,8 +284,7 @@ const a11y = [
     selector: "video:not([muted])",
     match(element) {
       const tracks = element.querySelectorAll("track");
-      if (!tracks.length)
-        return true;
+      if (!tracks.length) return true;
       const hasCaptionTrack = Array.from(tracks).some(
         (track) => track.getAttribute("kind") === "captions"
       );
@@ -318,11 +311,9 @@ const a11y = [
     selector: Object.keys(a11y_required_attributes).join(","),
     match(element) {
       const requiredAttributes = a11y_required_attributes[element.localName];
-      if (!requiredAttributes)
-        return true;
+      if (!requiredAttributes) return true;
       for (const attribute of requiredAttributes) {
-        if (!element.hasAttribute(attribute))
-          return true;
+        if (!element.hasAttribute(attribute)) return true;
       }
       return false;
     }
@@ -334,54 +325,45 @@ const a11y = [
     selector: a11y_required_content.join(","),
     match(element) {
       const innerText = element.innerText?.trim();
-      if (innerText && innerText !== "")
-        return false;
+      if (innerText && innerText !== "") return false;
       const ariaLabel = element.getAttribute("aria-label")?.trim();
-      if (ariaLabel && ariaLabel !== "")
-        return false;
+      if (ariaLabel && ariaLabel !== "") return false;
       const ariaLabelledby = element.getAttribute("aria-labelledby")?.trim();
       if (ariaLabelledby) {
         const ids = ariaLabelledby.split(" ");
         for (const id of ids) {
           const referencedElement = document.getElementById(id);
-          if (referencedElement && referencedElement.innerText.trim() !== "")
-            return false;
+          if (referencedElement && referencedElement.innerText.trim() !== "") return false;
         }
       }
       const imgElements = element.querySelectorAll("img");
       for (const img of imgElements) {
         const altAttribute = img.getAttribute("alt");
-        if (altAttribute && altAttribute.trim() !== "")
-          return false;
+        if (altAttribute && altAttribute.trim() !== "") return false;
       }
       const svgElements = element.querySelectorAll("svg");
       for (const svg of svgElements) {
         const titleText = svg.querySelector("title");
-        if (titleText && titleText.textContent && titleText.textContent.trim() !== "")
-          return false;
+        if (titleText && titleText.textContent && titleText.textContent.trim() !== "") return false;
       }
       const inputElements = element.querySelectorAll("input");
       for (const input of inputElements) {
         if (input.type === "image") {
           const altAttribute = input.getAttribute("alt");
-          if (altAttribute && altAttribute.trim() !== "")
-            return false;
+          if (altAttribute && altAttribute.trim() !== "") return false;
         }
         const inputAriaLabel = input.getAttribute("aria-label")?.trim();
-        if (inputAriaLabel && inputAriaLabel !== "")
-          return false;
+        if (inputAriaLabel && inputAriaLabel !== "") return false;
         const inputAriaLabelledby = input.getAttribute("aria-labelledby")?.trim();
         if (inputAriaLabelledby) {
           const ids = inputAriaLabelledby.split(" ");
           for (const id of ids) {
             const referencedElement = document.getElementById(id);
-            if (referencedElement && referencedElement.innerText.trim() !== "")
-              return false;
+            if (referencedElement && referencedElement.innerText.trim() !== "") return false;
           }
         }
         const title = input.getAttribute("title")?.trim();
-        if (title && title !== "")
-          return false;
+        if (title && title !== "") return false;
       }
       return true;
     }
@@ -395,19 +377,14 @@ const a11y = [
       const role = element.getAttribute("role");
       if (element.localName === "input") {
         const type = element.getAttribute("type");
-        if (!type)
-          return true;
+        if (!type) return true;
         const implicitRoleForType = input_type_to_implicit_role.get(type);
-        if (!implicitRoleForType)
-          return true;
-        if (role === implicitRoleForType)
-          return false;
+        if (!implicitRoleForType) return true;
+        if (role === implicitRoleForType) return false;
       }
       const implicitRole = a11y_implicit_semantics.get(element.localName);
-      if (!implicitRole)
-        return true;
-      if (role === implicitRole)
-        return false;
+      if (!implicitRole) return true;
+      if (role === implicitRole) return false;
     }
   },
   {
@@ -416,17 +393,12 @@ const a11y = [
     message: "Interactive HTML elements like `<a>` and `<button>` cannot use non-interactive roles like `heading`, `list`, `menu`, and `toolbar`.",
     selector: `[role]:is(${interactiveElements.join(",")})`,
     match(element) {
-      if (!isInteractive(element))
-        return false;
+      if (!isInteractive(element)) return false;
       const role = element.getAttribute("role");
-      if (!role)
-        return false;
-      if (!ariaRoles.has(role))
-        return false;
-      if (roleless_elements.includes(element.localName))
-        return false;
-      if (aria_non_interactive_roles.includes(role))
-        return true;
+      if (!role) return false;
+      if (!ariaRoles.has(role)) return false;
+      if (roleless_elements.includes(element.localName)) return false;
+      if (aria_non_interactive_roles.includes(role)) return true;
     }
   },
   {
@@ -435,20 +407,14 @@ const a11y = [
     message: "Interactive roles should not be used to convert a non-interactive element to an interactive element",
     selector: `[role]:not(${interactiveElements.join(",")})`,
     match(element) {
-      if (!isInteractive(element))
-        return false;
+      if (!isInteractive(element)) return false;
       const role = element.getAttribute("role");
-      if (!role)
-        return false;
-      if (!ariaRoles.has(role))
-        return false;
+      if (!role) return false;
+      if (!ariaRoles.has(role)) return false;
       const exceptions = a11y_non_interactive_element_to_interactive_role_exceptions[element.localName];
-      if (exceptions?.includes(role))
-        return false;
-      if (roleless_elements.includes(element.localName))
-        return false;
-      if (!aria_non_interactive_roles.includes(role))
-        return true;
+      if (exceptions?.includes(role)) return false;
+      if (roleless_elements.includes(element.localName)) return false;
+      if (!aria_non_interactive_roles.includes(role)) return true;
     }
   },
   {
@@ -459,10 +425,8 @@ const a11y = [
     selector: "[tabindex]",
     match(element) {
       const isScrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
-      if (isScrollable)
-        return false;
-      if (!isInteractive(element))
-        return false;
+      if (isScrollable) return false;
+      if (!isInteractive(element)) return false;
       if (!interactiveElements.includes(element.localName) && !roleless_elements.includes(element.localName))
         return true;
     }
@@ -483,8 +447,7 @@ const a11y = [
     selector: "*",
     match(element) {
       const role = getRole(element);
-      if (!role)
-        return false;
+      if (!role) return false;
       if (is_semantic_role_element(role, element.localName, getAttributeObject(element))) {
         return;
       }
@@ -513,8 +476,7 @@ const a11y = [
     selector: "*",
     match(element) {
       const role = getRole(element);
-      if (!role)
-        return false;
+      if (!role) return false;
       const elementRoles = role.split(WHITESPACE_REGEX);
       for (const elementRole of elementRoles) {
         const { props } = roles.get(elementRole);
@@ -545,8 +507,7 @@ const a11y = [
     match(element) {
       for (const attribute of element.attributes) {
         if (attribute.name.startsWith("aria-")) {
-          if (!ariaAttributes.has(attribute.name.slice("aria-".length)))
-            return true;
+          if (!ariaAttributes.has(attribute.name.slice("aria-".length))) return true;
         }
       }
     }
@@ -558,10 +519,8 @@ const a11y = [
     selector: "[role]",
     match(element) {
       const role = element.getAttribute("role");
-      if (!role)
-        return true;
-      if (!ariaRoles.has(role))
-        return true;
+      if (!role) return true;
+      if (!ariaRoles.has(role)) return true;
     }
   }
 ];
@@ -585,22 +544,18 @@ const a11y_non_interactive_element_to_interactive_role_exceptions = {
 };
 const combobox_if_list = ["email", "search", "tel", "text", "url"];
 function input_implicit_role(attributes) {
-  if (!("type" in attributes))
-    return;
+  if (!("type" in attributes)) return;
   const { type, list } = attributes;
-  if (!type)
-    return;
+  if (!type) return;
   if (list && combobox_if_list.includes(type)) {
     return "combobox";
   }
   return input_type_to_implicit_role.get(type);
 }
 function menuitem_implicit_role(attributes) {
-  if (!("type" in attributes))
-    return;
+  if (!("type" in attributes)) return;
   const { type } = attributes;
-  if (!type)
-    return;
+  if (!type) return;
   return menuitem_type_to_implicit_role.get(type);
 }
 function getRole(element) {

package/dist/runtime/client/dev-toolbar/apps/audit/rules/index.js

@@ -10,8 +10,7 @@ function resolveAuditRule(rule, element) {
   let resolved = { ...rule };
   for (const key of dynamicAuditRuleKeys) {
     const value = rule[key];
-    if (typeof value === "string")
-      continue;
+    if (typeof value === "string") continue;
     try {
       if (!value) {
         resolved[key] = "";

package/dist/runtime/client/dev-toolbar/apps/audit/rules/perf.js

@@ -7,14 +7,11 @@ const perf = [
     selector: "img:not([data-image-component])",
     async match(element) {
       const src = element.getAttribute("src");
-      if (!src)
-        return false;
-      if (src.startsWith("data:"))
-        return false;
+      if (!src) return false;
+      if (src.startsWith("data:")) return false;
       if (!EXTERNAL_URL_REGEX.test(src)) {
         const imageData = await fetch(src).then((response) => response.blob());
-        if (imageData.size < 20480)
-          return false;
+        if (imageData.size < 20480) return false;
       }
       return true;
     }
@@ -26,10 +23,8 @@ const perf = [
     selector: 'img:not([loading]), img[loading="eager"], iframe:not([loading]), iframe[loading="eager"]',
     match(element) {
       const htmlElement = element;
-      if (htmlElement.offsetTop < window.innerHeight)
-        return false;
-      if (htmlElement.src.startsWith("data:"))
-        return false;
+      if (htmlElement.offsetTop < window.innerHeight) return false;
+      if (htmlElement.src.startsWith("data:")) return false;
       return true;
     }
   },
@@ -40,10 +35,8 @@ const perf = [
     selector: 'img[loading="lazy"], iframe[loading="lazy"]',
     match(element) {
       const htmlElement = element;
-      if (htmlElement.offsetTop > window.innerHeight)
-        return false;
-      if (htmlElement.src.startsWith("data:"))
-        return false;
+      if (htmlElement.offsetTop > window.innerHeight) return false;
+      if (htmlElement.src.startsWith("data:")) return false;
       return true;
     }
   },
@@ -54,14 +47,11 @@ const perf = [
     selector: 'img[src$=".gif"]',
     async match(element) {
       const src = element.getAttribute("src");
-      if (!src)
-        return false;
-      if (EXTERNAL_URL_REGEX.test(src))
-        return false;
+      if (!src) return false;
+      if (EXTERNAL_URL_REGEX.test(src)) return false;
       if (!EXTERNAL_URL_REGEX.test(src)) {
         const imageData = await fetch(src).then((response) => response.blob());
-        if (imageData.size < 102400)
-          return false;
+        if (imageData.size < 102400) return false;
       }
       return true;
     }
@@ -75,11 +65,9 @@ const perf = [
     selector: "astro-island[server-render-time]",
     match(element) {
       const serverRenderTime = element.getAttribute("server-render-time");
-      if (!serverRenderTime)
-        return false;
+      if (!serverRenderTime) return false;
       const renderingTime = parseFloat(serverRenderTime);
-      if (Number.isNaN(renderingTime))
-        return false;
+      if (Number.isNaN(renderingTime)) return false;
       return renderingTime > 500;
     }
   },
@@ -92,21 +80,17 @@ const perf = [
     selector: "astro-island[client-render-time]",
     match(element) {
       const clientRenderTime = element.getAttribute("client-render-time");
-      if (!clientRenderTime)
-        return false;
+      if (!clientRenderTime) return false;
       const renderingTime = parseFloat(clientRenderTime);
-      if (Number.isNaN(renderingTime))
-        return false;
+      if (Number.isNaN(renderingTime)) return false;
       return renderingTime > 500;
     }
   }
 ];
 function getCleanRenderingTime(time) {
-  if (!time)
-    return "unknown";
+  if (!time) return "unknown";
   const renderingTime = parseFloat(time);
-  if (Number.isNaN(renderingTime))
-    return "unknown";
+  if (Number.isNaN(renderingTime)) return "unknown";
   return renderingTime.toFixed(2) + "s";
 }
 export {

package/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.js

@@ -331,8 +331,7 @@ class DevToolbarAuditListWindow extends HTMLElement {
           const template = this.shadowRoot.getElementById(
             "category-template"
           );
-          if (!template)
-            return;
+          if (!template) return;
           const clone = document.importNode(template.content, true);
           const categoryContainer = clone.querySelector("div");
           const categoryHeader = clone.querySelector(".category-header");
@@ -343,8 +342,7 @@ class DevToolbarAuditListWindow extends HTMLElement {
             (audit) => getAuditCategory(audit.rule) === category.code
           );
           for (const audit of categoryAudits) {
-            if (audit.card)
-              categoryContent.append(audit.card);
+            if (audit.card) categoryContent.append(audit.card);
           }
           categoryContainer.append(categoryContent);
           auditListContainer.append(categoryContainer);

package/dist/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.js

@@ -19,11 +19,9 @@ function createAuditUI(audit, audits) {
     highlight.addEventListener(event, () => {
       if (event === "focus") {
         audits.forEach((adt) => {
-          if (adt.card)
-            adt.card.toggleAttribute("active", false);
+          if (adt.card) adt.card.toggleAttribute("active", false);
         });
-        if (!card.isManualFocus)
-          card.scrollIntoView();
+        if (!card.isManualFocus) card.scrollIntoView();
         card.toggleAttribute("active", true);
       } else {
         card.toggleAttribute(attribute, true);
@@ -74,8 +72,7 @@ function buildAuditCard(rule, highlightElement, auditedElement, audits) {
     "astro-dev-toolbar-audit-list-item"
   );
   card.clickAction = () => {
-    if (card.hasAttribute("active"))
-      return;
+    if (card.hasAttribute("active")) return;
     audits.forEach((audit) => {
       audit.card?.toggleAttribute("active", false);
     });

package/dist/runtime/client/dev-toolbar/apps/utils/highlight.js

@@ -1,7 +1,6 @@
 function createHighlight(rect, icon, additionalAttributes) {
   const highlight = document.createElement("astro-dev-toolbar-highlight");
-  if (icon)
-    highlight.icon = icon;
+  if (icon) highlight.icon = icon;
   if (additionalAttributes) {
     for (const [key, value] of Object.entries(additionalAttributes)) {
       highlight.setAttribute(key, value);

package/dist/runtime/client/dev-toolbar/apps/utils/window.js

@@ -8,14 +8,10 @@ function createWindowElement(content, placement = settings.config.placement) {
 function closeOnOutsideClick(eventTarget, additionalCheck) {
   function onPageClick(event) {
     const target = event.target;
-    if (!target)
-      return;
-    if (!target.closest)
-      return;
-    if (target.closest("astro-dev-toolbar"))
-      return;
-    if (additionalCheck && additionalCheck(target))
-      return;
+    if (!target) return;
+    if (!target.closest) return;
+    if (target.closest("astro-dev-toolbar")) return;
+    if (additionalCheck && additionalCheck(target)) return;
     eventTarget.dispatchEvent(
       new CustomEvent("toggle-app", {
         detail: {

package/dist/runtime/client/dev-toolbar/entrypoint.js

@@ -19,7 +19,8 @@ document.addEventListener("DOMContentLoaded", async () => {
       DevToolbarButton,
       DevToolbarBadge,
       DevToolbarIcon,
-      DevToolbarSelect
+      DevToolbarSelect,
+      DevToolbarRadioCheckbox
     }
   ] = await Promise.all([
     loadDevToolbarApps(),
@@ -41,6 +42,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   customElements.define("astro-dev-toolbar-badge", DevToolbarBadge);
   customElements.define("astro-dev-toolbar-icon", DevToolbarIcon);
   customElements.define("astro-dev-toolbar-select", DevToolbarSelect);
+  customElements.define("astro-dev-toolbar-radio-checkbox", DevToolbarRadioCheckbox);
   const deprecated = (Parent) => class extends Parent {
   };
   customElements.define("astro-dev-overlay", deprecated(AstroDevToolbar));
@@ -71,17 +73,14 @@ document.addEventListener("DOMContentLoaded", async () => {
       eventTarget
     };
     eventTarget.addEventListener("toggle-notification", (evt) => {
-      if (!(evt instanceof CustomEvent))
-        return;
+      if (!(evt instanceof CustomEvent)) return;
       const target = overlay.shadowRoot?.querySelector(`[data-app-id="${app.id}"]`);
       const notificationElement = target?.querySelector(".notification");
-      if (!target || !notificationElement)
-        return;
+      if (!target || !notificationElement) return;
       let newState = evt.detail.state ?? true;
       let level = notificationLevels.includes(evt?.detail?.level) ? evt.detail.level : "error";
       app.notification.state = newState;
-      if (newState)
-        app.notification.level = level;
+      if (newState) app.notification.level = level;
       notificationElement.toggleAttribute("data-active", newState);
       if (newState) {
         notificationElement.setAttribute("data-level", level);
@@ -204,8 +203,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           buttonContainer.append(button);
           dropdown.append(buttonContainer);
           app.eventTarget.addEventListener("toggle-notification", (evt) => {
-            if (!(evt instanceof CustomEvent))
-              return;
+            if (!(evt instanceof CustomEvent)) return;
             let newState = evt.detail.state ?? true;
             let level = notificationLevels.includes(evt?.detail?.level) ? evt.detail.level : "error";
             notification.toggleAttribute("data-active", newState);
@@ -214,8 +212,7 @@ document.addEventListener("DOMContentLoaded", async () => {
               notification.innerHTML = notificationSVGs[level];
             }
             app.notification.state = newState;
-            if (newState)
-              app.notification.level = level;
+            if (newState) app.notification.level = level;
             eventTarget.dispatchEvent(
               new CustomEvent("toggle-notification", {
                 detail: {

package/dist/runtime/client/dev-toolbar/helpers.js

@@ -38,8 +38,7 @@ class ToolbarAppEventTarget extends EventTarget {
    */
   onToggled(callback) {
     this.addEventListener("app-toggled", (evt) => {
-      if (!(evt instanceof CustomEvent))
-        return;
+      if (!(evt instanceof CustomEvent)) return;
       callback(evt.detail);
     });
   }
@@ -49,8 +48,7 @@ class ToolbarAppEventTarget extends EventTarget {
    */
   onToolbarPlacementUpdated(callback) {
     this.addEventListener("placement-updated", (evt) => {
-      if (!(evt instanceof CustomEvent))
-        return;
+      if (!(evt instanceof CustomEvent)) return;
       callback(evt.detail);
     });
   }

package/dist/runtime/client/dev-toolbar/toolbar.js

@@ -294,14 +294,11 @@ class AstroDevToolbar extends HTMLElement {
     items.forEach((item) => {
       item.addEventListener("click", async (event) => {
         const target = event.currentTarget;
-        if (!target || !(target instanceof HTMLElement))
-          return;
+        if (!target || !(target instanceof HTMLElement)) return;
         const id = target.dataset.appId;
-        if (!id)
-          return;
+        if (!id) return;
         const app = this.getAppById(id);
-        if (!app)
-          return;
+        if (!app) return;
         event.stopPropagation();
         await this.toggleAppStatus(app);
       });
@@ -324,10 +321,8 @@ class AstroDevToolbar extends HTMLElement {
       });
     });
     document.addEventListener("keyup", (event) => {
-      if (event.key !== "Escape")
-        return;
-      if (this.isHidden())
-        return;
+      if (event.key !== "Escape") return;
+      if (this.isHidden()) return;
       const activeApp = this.getActiveApp();
       if (activeApp) {
         this.toggleAppStatus(activeApp);
@@ -385,11 +380,9 @@ class AstroDevToolbar extends HTMLElement {
     const activeApp = this.getActiveApp();
     if (activeApp) {
       const closeApp = await this.setAppStatus(activeApp, false);
-      if (!closeApp)
-        return;
+      if (!closeApp) return;
     }
-    if (app.status !== "ready")
-      return;
+    if (app.status !== "ready") return;
     if (app !== activeApp) {
       await this.setAppStatus(app, true);
       if (import.meta.hot && app.id !== "astro:more") {
@@ -401,12 +394,10 @@ class AstroDevToolbar extends HTMLElement {
   }
   async setAppStatus(app, newStatus) {
     const appCanvas = this.getAppCanvasById(app.id);
-    if (!appCanvas)
-      return false;
+    if (!appCanvas) return false;
     if (app.active && !newStatus && app.beforeTogglingOff) {
       const shouldToggleOff = await app.beforeTogglingOff(appCanvas.shadowRoot);
-      if (!shouldToggleOff)
-        return false;
+      if (!shouldToggleOff) return false;
     }
     app.active = newStatus ?? !app.active;
     const mainBarButton = this.getAppButtonById(app.id);
@@ -474,16 +465,14 @@ class AstroDevToolbar extends HTMLElement {
       this.devToolbarContainer?.removeAttribute("data-hidden");
       barContainer?.removeAttribute("inert");
       devBar?.removeAttribute("tabindex");
-      if (devBarHitboxAbove)
-        devBarHitboxAbove.style.height = "0";
+      if (devBarHitboxAbove) devBarHitboxAbove.style.height = "0";
       return;
     }
     if (newStatus === false) {
       this.devToolbarContainer?.setAttribute("data-hidden", "");
       barContainer?.setAttribute("inert", "");
       devBar?.setAttribute("tabindex", "0");
-      if (devBarHitboxAbove)
-        devBarHitboxAbove.style.height = `${DEVBAR_HITBOX_ABOVE}px`;
+      if (devBarHitboxAbove) devBarHitboxAbove.style.height = `${DEVBAR_HITBOX_ABOVE}px`;
       return;
     }
   }

package/dist/runtime/client/dev-toolbar/ui-library/badge.js

@@ -86,8 +86,7 @@ class DevToolbarBadge extends HTMLElement {
   attributeChangedCallback() {
     if (this.hasAttribute("badge-style"))
       this.badgeStyle = this.getAttribute("badge-style");
-    if (this.hasAttribute("size"))
-      this.size = this.getAttribute("size");
+    if (this.hasAttribute("size")) this.size = this.getAttribute("size");
   }
   updateStyle() {
     const style = this.shadowRoot.querySelector("#selected-style");

package/dist/runtime/client/dev-toolbar/ui-library/button.d.ts

@@ -1,14 +1,19 @@
 declare const sizes: readonly ["small", "medium", "large"];
 declare const styles: readonly ["ghost", "outline", "purple", "gray", "red", "green", "yellow", "blue"];
+declare const borderRadii: readonly ["normal", "rounded"];
 type ButtonSize = (typeof sizes)[number];
 type ButtonStyle = (typeof styles)[number];
+type ButtonBorderRadius = (typeof borderRadii)[number];
 export declare class DevToolbarButton extends HTMLElement {
     _size: ButtonSize;
     _buttonStyle: ButtonStyle;
+    _buttonBorderRadius: ButtonBorderRadius;
     get size(): "small" | "large" | "medium";
     set size(value: "small" | "large" | "medium");
     get buttonStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue" | "ghost" | "outline";
     set buttonStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue" | "ghost" | "outline");
+    get buttonBorderRadius(): "normal" | "rounded";
+    set buttonBorderRadius(value: "normal" | "rounded");
     static observedAttributes: string[];
     shadowRoot: ShadowRoot;
     constructor();