astro 4.4.14 → 4.5.0

package/dist/runtime/client/dev-toolbar/toolbar.d.ts

@@ -6,6 +6,7 @@ export type DevToolbarApp = DevToolbarAppDefinition & {
     status: 'ready' | 'loading' | 'error';
     notification: {
         state: boolean;
+        level?: 'error' | 'warning' | 'info';
     };
     eventTarget: EventTarget;
 };

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

@@ -142,6 +142,7 @@ class AstroDevToolbar extends HTMLElement {
 				opacity: 0;
 				transition: opacity 0.2s ease-in-out 0s;
 				pointer-events: none;
+				user-select: none;
 			}
 
 			#dev-bar .item-tooltip::after{
@@ -170,8 +171,8 @@ class AstroDevToolbar extends HTMLElement {
 				}
 			}
 
-			#dev-bar #bar-container .item.active .notification {
-				border-color: rgba(71, 78, 94, 1);
+			#dev-bar #bar-container .item.active .notification rect, #dev-bar #bar-container .item.active .notification path {
+				stroke: rgba(71, 78, 94, 1);
 			}
 
 			#dev-bar .item .icon {
@@ -181,7 +182,7 @@ class AstroDevToolbar extends HTMLElement {
 				user-select: none;
 			}
 
-			#dev-bar .item svg {
+			#dev-bar .item .icon>svg {
 				width: 20px;
 				height: 20px;
 				display: block;
@@ -199,11 +200,12 @@ class AstroDevToolbar extends HTMLElement {
 				position: absolute;
 				top: -4px;
 				right: -6px;
-				width: 8px;
-				height: 8px;
-				border-radius: 9999px;
-				border: 1px solid rgba(19, 21, 26, 1);
-				background: #B33E66;
+				width: 10px;
+				height: 10px;
+			}
+
+			#dev-bar .item .notification svg {
+				display: block;
 			}
 
 			#dev-toolbar-root:not([data-no-notification]) #dev-bar .item .notification[data-active] {

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

@@ -1,9 +1,19 @@
-type BadgeSize = 'small' | 'large';
-type BadgeStyle = 'purple' | 'gray' | 'red' | 'green' | 'yellow';
+declare const sizes: readonly ["small", "large"];
+declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
+type BadgeSize = (typeof sizes)[number];
+type BadgeStyle = (typeof styles)[number];
 export declare class DevToolbarBadge extends HTMLElement {
-    size: BadgeSize;
-    badgeStyle: BadgeStyle;
+    _size: BadgeSize;
+    _badgeStyle: BadgeStyle;
+    get size(): "small" | "large";
+    set size(value: "small" | "large");
+    get badgeStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
+    set badgeStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
     shadowRoot: ShadowRoot;
+    static observedAttributes: string[];
     constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateStyle(): void;
 }
 export {};

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

@@ -1,15 +1,40 @@
+import { settings } from "../settings.js";
+const sizes = ["small", "large"];
+const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
 class DevToolbarBadge extends HTMLElement {
-  size = "small";
-  badgeStyle = "purple";
+  _size = "small";
+  _badgeStyle = "purple";
+  get size() {
+    return this._size;
+  }
+  set size(value) {
+    if (!sizes.includes(value)) {
+      settings.logger.error(
+        `Invalid size: ${value}, expected one of ${sizes.join(", ")}, got ${value}.`
+      );
+      return;
+    }
+    this._size = value;
+    this.updateStyle();
+  }
+  get badgeStyle() {
+    return this._badgeStyle;
+  }
+  set badgeStyle(value) {
+    if (!styles.includes(value)) {
+      settings.logger.error(
+        `Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
+      );
+      return;
+    }
+    this._badgeStyle = value;
+    this.updateStyle();
+  }
   shadowRoot;
+  static observedAttributes = ["badge-style", "size"];
   constructor() {
     super();
     this.shadowRoot = this.attachShadow({ mode: "open" });
-    if (this.hasAttribute("size"))
-      this.size = this.getAttribute("size");
-    if (this.hasAttribute("badge-style"))
-      this.badgeStyle = this.getAttribute("badge-style");
-    const classes = [`badge--${this.size}`, `badge--${this.badgeStyle}`];
     this.shadowRoot.innerHTML = `
 			<style>
 				.badge {
@@ -18,49 +43,63 @@ class DevToolbarBadge extends HTMLElement {
 					border: 1px solid transparent;
 					padding: 8px;
 					font-size: 12px;
-					color: #fff;
-					height: 20px;
+					color: var(--text-color);
+					height: var(--size);
+					border: 1px solid var(--border-color);
 					display: flex;
 					align-items: center;
 					justify-content: center;
 					font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-				}
 
-				.badge--large {
-					height: 24px;
-				}
+					--purple-text: rgba(224, 204, 250, 1);
+					--purple-border: rgba(113, 24, 226, 1);
 
-				.badge--gray {
-					color: rgba(191, 193, 201, 1);
-					border-color: rgba(191, 193, 201, 1);
-				}
+					--gray-text: rgba(191, 193, 201, 1);
+					--gray-border:rgba(191, 193, 201, 1);
 
-				.badge--purple {
-					color: rgba(224, 204, 250, 1);
-					border-color: rgba(113, 24, 226, 1);
-				}
+					--red-text: rgba(249, 196, 215, 1);
+					--red-border: rgba(179, 62, 102, 1);
 
-				.badge--red {
-					color: rgba(249, 196, 215, 1);
-					border-color: rgba(179, 62, 102, 1);
-				}
+					--green-text: rgba(213, 249, 196, 1);
+					--green-border: rgba(61, 125, 31, 1);
 
-				.badge--green {
-					color: rgba(213, 249, 196, 1);
-					border-color: rgba(61, 125, 31, 1);
-				}
+					--yellow-text: rgba(249, 233, 196, 1);
+					--yellow-border: rgba(181, 138, 45, 1);
 
-				.badge--yellow {
-					color: rgba(249, 233, 196, 1);
-					border-color: rgba(181, 138, 45, 1);
+					--blue-text: rgba(189, 195, 255, 1);
+					--blue-border: rgba(54, 69, 217, 1);
+
+					--large: 24px;
+					--small: 20px;
 				}
 			</style>
+			<style id="selected-style"></style>
 
-			<div class="badge ${classes.join(" ")}">
+			<div class="badge">
 				<slot></slot>
 			</div>
 			`;
   }
+  connectedCallback() {
+    this.updateStyle();
+  }
+  attributeChangedCallback() {
+    if (this.hasAttribute("badge-style"))
+      this.badgeStyle = this.getAttribute("badge-style");
+    if (this.hasAttribute("size"))
+      this.size = this.getAttribute("size");
+  }
+  updateStyle() {
+    const style = this.shadowRoot.querySelector("#selected-style");
+    if (style) {
+      style.innerHTML = `
+			.badge {
+				--text-color: var(--${this.badgeStyle}-text);
+				--border-color: var(--${this.badgeStyle}-border);
+				--size: var(--${this.size});
+			}`;
+    }
+  }
 }
 export {
   DevToolbarBadge

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

@@ -1,9 +1,19 @@
-type ButtonSize = 'small' | 'medium' | 'large';
-type ButtonStyle = 'ghost' | 'outline' | 'purple' | 'gray' | 'red';
+declare const sizes: readonly ["small", "medium", "large"];
+declare const styles: readonly ["ghost", "outline", "purple", "gray", "red", "green", "yellow", "blue"];
+type ButtonSize = (typeof sizes)[number];
+type ButtonStyle = (typeof styles)[number];
 export declare class DevToolbarButton extends HTMLElement {
-    size: ButtonSize;
-    buttonStyle: ButtonStyle;
+    _size: ButtonSize;
+    _buttonStyle: ButtonStyle;
+    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");
+    static observedAttributes: string[];
     shadowRoot: ShadowRoot;
     constructor();
+    connectedCallback(): void;
+    updateStyle(): void;
+    attributeChangedCallback(): void;
 }
 export {};

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

@@ -1,67 +1,97 @@
+import { settings } from "../settings.js";
+const sizes = ["small", "medium", "large"];
+const styles = ["ghost", "outline", "purple", "gray", "red", "green", "yellow", "blue"];
 class DevToolbarButton extends HTMLElement {
-  size = "small";
-  buttonStyle = "purple";
+  _size = "small";
+  _buttonStyle = "purple";
+  get size() {
+    return this._size;
+  }
+  set size(value) {
+    if (!sizes.includes(value)) {
+      settings.logger.error(
+        `Invalid size: ${value}, expected one of ${sizes.join(", ")}, got ${value}.`
+      );
+      return;
+    }
+    this._size = value;
+    this.updateStyle();
+  }
+  get buttonStyle() {
+    return this._buttonStyle;
+  }
+  set buttonStyle(value) {
+    if (!styles.includes(value)) {
+      settings.logger.error(
+        `Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
+      );
+      return;
+    }
+    this._buttonStyle = value;
+    this.updateStyle();
+  }
+  static observedAttributes = ["button-style", "size"];
   shadowRoot;
   constructor() {
     super();
     this.shadowRoot = this.attachShadow({ mode: "open" });
-    if (this.hasAttribute("size"))
-      this.size = this.getAttribute("size");
-    if (this.hasAttribute("button-style"))
-      this.buttonStyle = this.getAttribute("button-style");
-    const classes = [`button--${this.size}`, `button--${this.buttonStyle}`];
     this.shadowRoot.innerHTML = `
 			<style>
 				button {
-					border: 1px solid transparent;
-					color: #fff;
-					border-radius: 4px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-				}
+					--purple-background: rgba(113, 24, 226, 1);
+					--purple-border: rgba(224, 204, 250, 0.33);
+					--purple-text: #fff;
 
-				button:hover {
-					cursor: pointer;
-				}
+					--gray-background: rgba(52, 56, 65, 1);
+					--gray-border: rgba(71, 78, 94, 1);
+					--gray-text: #fff;
 
-				.button--small {
-					font-size: 12px;
-					padding: 4px 8px;
-				}
+					--red-background: rgba(179, 62, 102, 1);
+					--red-border: rgba(249, 196, 215, 0.33);
+					--red-text: #fff;
 
-				.button--medium {
-					font-size: 14px;
-					padding: 8px 12px;
-				}
+					--green-background: rgba(213, 249, 196, 1);
+					--green-border: rgba(61, 125, 31, 1);
+					--green-text: #000;
 
-				.button--large {
-					font-size: 16px;
-					padding: 12px 16px;
-				}
+					--yellow-background: rgba(255, 236, 179, 1);
+					--yellow-border: rgba(255, 191, 0, 1);
+					--yellow-text: #000;
 
-				.button--ghost {
-					background: transparent;
-				}
+					--blue-background: rgba(54, 69, 217, 1);
+					--blue-border: rgba(189, 195, 255, 1);
+					--blue-text: #fff;
 
-				.button--outline {
-					background: transparent;
-					border-color: #fff;
-				}
+					--outline-background: transparent;
+					--outline-border: #fff;
+					--outline-text: #fff;
 
-				.button--purple {
-					background: rgba(113, 24, 226, 1);
-					border-color: rgba(224, 204, 250, 0.33);
-				}
+					--ghost-background: transparent;
+					--ghost-border: transparent;
+					--ghost-text: #fff;
+
+					--large-font-size: 16px;
+					--medium-font-size: 14px;
+					--small-font-size: 12px;
+
+					--large-padding: 12px 16px;
+					--medium-padding: 8px 12px;
+					--small-padding: 4px 8px;
 
-				.button--gray {
-					background: rgba(52, 56, 65, 1);
-					border-color: rgba(71, 78, 94, 1);
+					border: 1px solid var(--border);
+					padding: var(--padding);
+					font-size: var(--font-size);
+					background: var(--background);
+
+					color: var(--text-color);
+					border-radius: 4px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 				}
 
-				.button--red {
-					background: rgba(179, 62, 102, 1);
-					border-color: rgba(249, 196, 215, 0.33);
+				button:hover {
+					cursor: pointer;
 				}
 
 				/* TODO: Remove "astro-dev-overlay-icon" in Astro 5.0 */
@@ -73,12 +103,35 @@ class DevToolbarButton extends HTMLElement {
 					margin-left: 0.5em;
 				}
 			</style>
+			<style id="selected-style"></style>
 
-			<button class="${classes.join(" ")}">
+			<button>
 				<slot></slot>
 			</button>
 		`;
   }
+  connectedCallback() {
+    this.updateStyle();
+  }
+  updateStyle() {
+    const style = this.shadowRoot.querySelector("#selected-style");
+    if (style) {
+      style.innerHTML = `
+			button {
+				--background: var(--${this.buttonStyle}-background);
+				--border: var(--${this.buttonStyle}-border);
+				--font-size: var(--${this.size}-font-size);
+				--padding: var(--${this.size}-padding);
+				--text-color: var(--${this.buttonStyle}-text);
+			}`;
+    }
+  }
+  attributeChangedCallback() {
+    if (this.hasAttribute("size"))
+      this.size = this.getAttribute("size");
+    if (this.hasAttribute("button-style"))
+      this.buttonStyle = this.getAttribute("button-style");
+  }
 }
 export {
   DevToolbarButton

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

@@ -1,7 +1,16 @@
+declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
+type CardStyle = (typeof styles)[number];
 export declare class DevToolbarCard extends HTMLElement {
     link?: string | undefined | null;
     clickAction?: () => void | (() => Promise<void>);
     shadowRoot: ShadowRoot;
+    _cardStyle: CardStyle;
+    get cardStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
+    set cardStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
+    static observedAttributes: string[];
     constructor();
+    attributeChangedCallback(): void;
+    updateStyle(): void;
     connectedCallback(): void;
 }
+export {};

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

@@ -1,16 +1,69 @@
+import { settings } from "../settings.js";
+const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
 class DevToolbarCard extends HTMLElement {
   link;
   clickAction;
   shadowRoot;
+  _cardStyle = "purple";
+  get cardStyle() {
+    return this._cardStyle;
+  }
+  set cardStyle(value) {
+    if (!styles.includes(value)) {
+      settings.logger.error(
+        `Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
+      );
+      return;
+    }
+    this._cardStyle = value;
+    this.updateStyle();
+  }
+  static observedAttributes = ["card-style"];
   constructor() {
     super();
     this.shadowRoot = this.attachShadow({ mode: "open" });
     this.link = this.getAttribute("link");
   }
+  attributeChangedCallback() {
+    if (this.hasAttribute("card-style"))
+      this.cardStyle = this.getAttribute("card-style");
+    this.updateStyle();
+  }
+  updateStyle() {
+    const style = this.shadowRoot.querySelector("#selected-style");
+    if (style) {
+      style.innerHTML = `
+				:host {
+					--hover-background: var(--${this.cardStyle}-hover-background);
+					--hover-border: var(--${this.cardStyle}-hover-border);
+				}
+			`;
+    }
+  }
   connectedCallback() {
     const element = this.link ? "a" : this.clickAction ? "button" : "div";
     this.shadowRoot.innerHTML += `
 			<style>
+				:host {
+					--purple-hover-background: rgba(136, 58, 234, 0.33);
+					--purple-hover-border: 1px solid rgba(113, 24, 226, 1);
+
+					--gray-hover-background: rgba(191, 193, 201, 0.33);
+					--gray-hover-border: 1px solid rgba(191, 193, 201, 1);
+
+					--red-hover-background: rgba(249, 196, 215, 0.33);
+					--red-hover-border: 1px solid rgba(179, 62, 102, 1);
+
+					--green-hover-background: rgba(213, 249, 196, 0.33);
+					--green-hover-border: 1px solid rgba(61, 125, 31, 1);
+
+					--yellow-hover-background: rgba(255, 236, 179, 0.33);
+					--yellow-hover-border: 1px solid rgba(255, 191, 0, 1);
+
+					--blue-hover-background: rgba(189, 195, 255, 0.33);
+					--blue-hover-border: 1px solid rgba(54, 69, 217, 1);
+				}
+
 				:host>a, :host>button, :host>div {
 					box-sizing: border-box;
 					padding: 16px;
@@ -31,8 +84,8 @@ class DevToolbarCard extends HTMLElement {
 				}
 
 				a:hover, button:hover {
-					background: rgba(136, 58, 234, 0.33);
-					border: 1px solid rgba(113, 24, 226, 1)
+					background: var(--hover-background);
+					border: var(--hover-border);
 				}
 
 				svg {
@@ -46,11 +99,13 @@ class DevToolbarCard extends HTMLElement {
 					text-align: center;
 				}
 			</style>
+			<style id="selected-style"></style>
 
 			<${element}${this.link ? ` href="${this.link}" target="_blank"` : ``} id="astro-overlay-card">
 				<slot />
 			</${element}>
 		`;
+    this.updateStyle();
     if (this.clickAction) {
       this.shadowRoot.getElementById("astro-overlay-card")?.addEventListener("click", this.clickAction);
     }

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

@@ -1,7 +1,16 @@
 import { type Icon } from './icons.js';
+declare const styles: readonly ["purple", "gray", "red", "green", "yellow", "blue"];
+type HighlightStyle = (typeof styles)[number];
 export declare class DevToolbarHighlight extends HTMLElement {
     icon?: Icon | undefined | null;
+    _highlightStyle: HighlightStyle;
+    get highlightStyle(): "red" | "purple" | "gray" | "green" | "yellow" | "blue";
+    set highlightStyle(value: "red" | "purple" | "gray" | "green" | "yellow" | "blue");
+    static observedAttributes: string[];
     shadowRoot: ShadowRoot;
     constructor();
+    updateStyle(): void;
+    attributeChangedCallback(): void;
     connectedCallback(): void;
 }
+export {};

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

@@ -1,6 +1,23 @@
+import { settings } from "../settings.js";
 import { getIconElement, isDefinedIcon } from "./icons.js";
+const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
 class DevToolbarHighlight extends HTMLElement {
   icon;
+  _highlightStyle = "purple";
+  get highlightStyle() {
+    return this._highlightStyle;
+  }
+  set highlightStyle(value) {
+    if (!styles.includes(value)) {
+      settings.logger.error(
+        `Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
+      );
+      return;
+    }
+    this._highlightStyle = value;
+    this.updateStyle();
+  }
+  static observedAttributes = ["highlight-style"];
   shadowRoot;
   constructor() {
     super();
@@ -9,14 +26,33 @@ class DevToolbarHighlight extends HTMLElement {
     this.shadowRoot.innerHTML = `
 			<style>
 				:host {
-					background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);
-					border: 1px solid rgba(113, 24, 226, 1);
+					--purple-background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);
+					--purple-border: 1px solid rgba(113, 24, 226, 1);
+
+					--gray-background: linear-gradient(180deg, rgba(191, 193, 201, 0.33) 0%, rgba(191, 193, 201, 0.0825) 100%);
+					--gray-border: 1px solid rgba(191, 193, 201, 1);
+
+					--red-background: linear-gradient(180deg, rgba(249, 196, 215, 0.33) 0%, rgba(249, 196, 215, 0.0825) 100%);
+					--red-border: 1px solid rgba(179, 62, 102, 1);
+
+					--green-background: linear-gradient(180deg, rgba(213, 249, 196, 0.33) 0%, rgba(213, 249, 196, 0.0825) 100%);
+					--green-border: 1px solid rgba(61, 125, 31, 1);
+
+					--yellow-background: linear-gradient(180deg, rgba(255, 236, 179, 0.33) 0%, rgba(255, 236, 179, 0.0825) 100%);
+					--yellow-border: 1px solid rgba(181, 138, 45, 1);
+
+					--blue-background: linear-gradient(180deg, rgba(189, 195, 255, 0.33) 0%, rgba(189, 195, 255, 0.0825) 100%);
+					--blue-border: 1px solid rgba(54, 69, 217, 1);
+
 					border-radius: 4px;
 					display: block;
 					width: 100%;
 					height: 100%;
 					position: absolute;
 					z-index: 2000000000;
+
+					background: var(--background);
+					border: var(--border);
 				}
 
 				.icon {
@@ -34,9 +70,25 @@ class DevToolbarHighlight extends HTMLElement {
 					right: -15px;
 				}
 			</style>
+			<style id="selected-style"></style>
 		`;
   }
+  updateStyle() {
+    const style = this.shadowRoot.querySelector("#selected-style");
+    if (style) {
+      style.innerHTML = `
+			:host {
+				--background: var(--${this.highlightStyle}-background);
+				--border: var(--${this.highlightStyle}-border);
+			}`;
+    }
+  }
+  attributeChangedCallback() {
+    if (this.hasAttribute("highlight-style"))
+      this.highlightStyle = this.getAttribute("highlight-style");
+  }
   connectedCallback() {
+    this.updateStyle();
     if (this.icon) {
       let iconContainer = document.createElement("div");
       iconContainer.classList.add("icon");