@redvars/peacock 3.2.8 → 3.2.10

package/dist/{breadcrumb-item-DkhwoMAH.js → image-v3BujlY5.js}

@@ -1,9 +1,12 @@
-import { e as e$1, i, _ as __decorate, n, a as i$1, b, c as __classPrivateFieldGet, A } from './PeacockComponent-DMrFEGDh.js';
-import { r } from './state-CEVpI7Vv.js';
-import { e as e$2 } from './unsafe-html-Ca00SXpn.js';
-import { a as e, c as createCacheFetch, b as sanitizeSvg, o as observerSlotChangesWithCallback, d as css_248z$w, f as css_248z$x, g as BaseButton, t as throttle, s as spread, e as e$4, r as redispatchEvent } from './button-BtpAXuLN.js';
-import { e as e$3 } from './class-map-CbncA34D.js';
-import { o as o$3 } from './style-map-mOmZwsJT.js';
+import { i, _ as __decorate, n, a as i$1, b, c as __classPrivateFieldGet, A } from './PeacockComponent-CxJc63xj.js';
+import { r } from './state-B09bP3XH.js';
+import { e as e$1 } from './directive-Cuw6h7YA.js';
+import { e as e$2 } from './unsafe-html-B-dV3Jps.js';
+import { b as e, c as createCacheFetch, s as sanitizeSvg, o as observerSlotChangesWithCallback, t as throttle, e as e$4, r as redispatchEvent, a as isDarkMode } from './dispatch-event-utils-vbdiOSeC.js';
+import { e as e$3 } from './class-map-BvQRv7eW.js';
+import { c as css_248z$x, a as css_248z$y, b as BaseButton, s as spread } from './button-DaL4va7Q.js';
+import { o as o$3 } from './style-map-B8xgVEc9.js';
+import { B as BaseInput, o as observeThemeChange } from './observe-theme-change-NneLARW8.js';
 
 /**
  * @license
@@ -36,7 +39,7 @@ async function fetchIcon(name, provider = 'material-symbols') {
     return fetchSVG(PROVIDERS[provider](name));
 }
 
-var css_248z$v = i`* {
+var css_248z$w = i`* {
   box-sizing: border-box;
 }
 
@@ -165,7 +168,7 @@ class Icon extends i$1 {
         }
     }
 }
-Icon.styles = [css_248z$v];
+Icon.styles = [css_248z$w];
 __decorate([
     n({ type: String, reflect: true })
 ], Icon.prototype, "name", void 0);
@@ -185,7 +188,7 @@ __decorate([
     r()
 ], Icon.prototype, "error", void 0);
 
-var css_248z$u = i`* {
+var css_248z$v = i`* {
   box-sizing: border-box;
 }
 
@@ -276,7 +279,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$u];
+Avatar.styles = [css_248z$v];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -284,7 +287,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$t = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -356,12 +359,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$t];
+Badge.styles = [css_248z$u];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$s = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -470,7 +473,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$s];
+Divider.styles = [css_248z$t];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -478,7 +481,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$r = i`/**
+var css_248z$s = i`/**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
  */
@@ -551,9 +554,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$r];
+Elevation.styles = [css_248z$s];
 
-var css_248z$q = i`.button {
+var css_248z$r = i`.button {
   --_container-padding: 0.75rem;
   width: var(--_button-height);
   --_container-padding: 0;
@@ -722,7 +725,7 @@ class IconButton extends BaseButton {
     }
 }
 _IconButton_id = new WeakMap(), _IconButton_tabindex = new WeakMap();
-IconButton.styles = [css_248z$w, css_248z$x, css_248z$q];
+IconButton.styles = [css_248z$x, css_248z$y, css_248z$r];
 __decorate([
     n({ type: String, reflect: true })
 ], IconButton.prototype, "name", void 0);
@@ -733,7 +736,7 @@ __decorate([
     n({ type: String })
 ], IconButton.prototype, "provider", void 0);
 
-var css_248z$p = i`:host {
+var css_248z$q = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -827,7 +830,7 @@ class FocusRing extends i$1 {
         this._control = undefined;
     }
 }
-FocusRing.styles = [css_248z$p];
+FocusRing.styles = [css_248z$q];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -959,7 +962,7 @@ Ripple.styles = i `
     }
   `;
 
-var css_248z$o = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -979,7 +982,7 @@ slot::slotted(:last-child) {
   border-block-end: 1px solid var(--color-outline);
 }`;
 
-var css_248z$n = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -1002,6 +1005,7 @@ var css_248z$n = i`* {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
+  color: var(--color-on-surface);
   justify-content: flex-start;
   gap: 0.5rem;
   font-family: var(--typography-title-medium-font-family) !important;
@@ -1034,7 +1038,6 @@ var css_248z$n = i`* {
 }
 .accordion-item.disabled .accordion-heading {
   cursor: not-allowed;
-  color: var(--color-on-surface);
   opacity: 0.38;
 }
 .accordion-item.open .item-section {
@@ -1148,7 +1151,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$n];
+AccordionItem.styles = [css_248z$o];
 __decorate([
     n({ type: String, reflect: true })
 ], AccordionItem.prototype, "heading", void 0);
@@ -1260,7 +1263,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$o];
+Accordion.styles = [css_248z$p];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, attribute: 'allow-multiple' })
@@ -1269,7 +1272,7 @@ __decorate([
     o$2({ selector: 'p-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$m = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -1341,7 +1344,7 @@ class Link extends i$1 {
     </a>`;
     }
 }
-Link.styles = [css_248z$m];
+Link.styles = [css_248z$n];
 __decorate([
     n({ reflect: true })
 ], Link.prototype, "href", void 0);
@@ -1352,7 +1355,7 @@ __decorate([
     r()
 ], Link.prototype, "tabIndexValue", void 0);
 
-var css_248z$l = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -1489,7 +1492,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$k = i`:host([color=default]) {
+var css_248z$l = i`:host([color=default]) {
   --filled-tag-container-color: var(--color-surface);
   --filled-tag-label-text-color: var(--color-on-surface);
   --tonal-tag-container-color: var(--color-surface-container);
@@ -1555,7 +1558,7 @@ var css_248z$k = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$j = i`.tag {
+var css_248z$k = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -1654,7 +1657,7 @@ class Tag extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Tag.styles = [css_248z$l, css_248z$k, css_248z$j];
+Tag.styles = [css_248z$m, css_248z$l, css_248z$k];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -1668,7 +1671,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$i = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -1780,7 +1783,7 @@ var css_248z$i = i`* {
   color: var(--background);
 }`;
 
-var css_248z$h = i`:host([color=red]) {
+var css_248z$i = i`:host([color=red]) {
   --chip-container-color: var(--color-red-container);
   --chip-outline-color: var(--color-on-red-container);
 }
@@ -1809,7 +1812,7 @@ var css_248z$h = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$g = i`.tag {
+var css_248z$h = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -1947,7 +1950,7 @@ class Chip extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$i, css_248z$h, css_248z$g];
+Chip.styles = [css_248z$j, css_248z$i, css_248z$h];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -1964,7 +1967,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$f = i`:host {
+var css_248z$g = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2170,9 +2173,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$f];
+LinearProgress.styles = [css_248z$g];
 
-var css_248z$e = i`:host {
+var css_248z$f = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -2335,9 +2338,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$e];
+CircularProgress.styles = [css_248z$f];
 
-var css_248z$d = i`:host {
+var css_248z$e = i`:host {
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
   display: inline-block;
@@ -2440,34 +2443,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$d];
+Skeleton.styles = [css_248z$e];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-class BaseInput extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.skeleton = false;
-    }
-}
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "disabled", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "readonly", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "required", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseInput.prototype, "skeleton", void 0);
-
-var css_248z$c = i`* {
+var css_248z$d = i`* {
   box-sizing: border-box;
 }
 
@@ -2640,7 +2621,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$c];
+Input.styles = [css_248z$d];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -2699,7 +2680,7 @@ __decorate([
     e$4('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$b = i`* {
+var css_248z$c = i`* {
   box-sizing: border-box;
 }
 
@@ -3050,7 +3031,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$b];
+Field.styles = [css_248z$c];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -3106,7 +3087,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$a = i`* {
+var css_248z$b = i`* {
   box-sizing: border-box;
 }
 
@@ -3303,7 +3284,7 @@ class NumberField extends BaseInput {
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$a];
+NumberField.styles = [css_248z$b];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -3365,7 +3346,7 @@ __decorate([
     e$4('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$9 = i`* {
+var css_248z$a = i`* {
   box-sizing: border-box;
 }
 
@@ -3532,7 +3513,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$9];
+DatePicker.styles = [css_248z$a];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -3588,7 +3569,7 @@ __decorate([
     e$4('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$8 = i`* {
+var css_248z$9 = i`* {
   box-sizing: border-box;
 }
 
@@ -3755,7 +3736,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$8];
+TimePicker.styles = [css_248z$9];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -3811,7 +3792,7 @@ __decorate([
     e$4('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$7 = i`* {
+var css_248z$8 = i`* {
   box-sizing: border-box;
 }
 
@@ -3971,7 +3952,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$7];
+Textarea.styles = [css_248z$8];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -4030,7 +4011,7 @@ __decorate([
     e$4('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$6 = i`* {
+var css_248z$7 = i`* {
   box-sizing: border-box;
 }
 
@@ -4371,7 +4352,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$6];
+Switch.styles = [css_248z$7];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -4415,7 +4396,7 @@ __decorate([
     e$4('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$5 = i`* {
+var css_248z$6 = i`* {
   box-sizing: border-box;
 }
 
@@ -4502,9 +4483,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$5];
+Spinner.styles = [css_248z$6];
 
-var css_248z$4 = i`* {
+var css_248z$5 = i`* {
   box-sizing: border-box;
 }
 
@@ -4540,7 +4521,7 @@ var css_248z$4 = i`* {
   width: 100%;
 }
 .container .content {
-  padding: v(--spacing-200);
+  padding: var(--spacing-200);
 }
 
 :host(.debug) {
@@ -4627,12 +4608,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$4];
+Container.styles = [css_248z$5];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$3 = i`* {
+var css_248z$4 = i`* {
   box-sizing: border-box;
 }
 
@@ -4781,7 +4762,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$3];
+EmptyState.styles = [css_248z$4];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -4795,7 +4776,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$2 = i`* {
+var css_248z$3 = i`* {
   box-sizing: border-box;
 }
 
@@ -6623,7 +6604,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$2];
+Tooltip.styles = [css_248z$3];
 Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
 __decorate([
     n()
@@ -6644,7 +6625,7 @@ __decorate([
     e$4('#tooltip')
 ], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$1 = i`* {
+var css_248z$2 = i`* {
   box-sizing: border-box;
 }
 
@@ -6718,7 +6699,7 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$1];
+Breadcrumb.styles = [css_248z$2];
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
@@ -6729,7 +6710,7 @@ __decorate([
  * SPDX-License-Identifier: BSD-3-Clause
  */const o=o=>o??A;
 
-var css_248z = i`* {
+var css_248z$1 = i`* {
   box-sizing: border-box;
 }
 
@@ -6858,7 +6839,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z];
+BreadcrumbItem.styles = [css_248z$1];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -6875,5 +6856,193 @@ __decorate([
     r()
 ], BreadcrumbItem.prototype, "position", void 0);
 
-export { Accordion as A, Badge as B, Chip as C, DatePicker as D, Elevation as E, Field as F, Icon as I, LinearProgress as L, NumberField as N, Ripple as R, Skeleton as S, Tag as T, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, CircularProgress as d, Container as e, Divider as f, EmptyState as g, FocusRing as h, IconButton as i, Input as j, Link as k, Spinner as l, Switch as m, Textarea as n, TimePicker as o, Tooltip as p };
-//# sourceMappingURL=breadcrumb-item-DkhwoMAH.js.map
+var css_248z = i`@charset "UTF-8";
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+img {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+img.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  background: #e0e0e0;
+  min-width: 100px;
+  min-height: 100px;
+  display: block;
+}
+
+/* Preview overlay — rendered in light DOM via portal, but we keep
+    a host-level overlay as a fallback when shadow DOM is used.       */
+.preview-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.preview-overlay.open {
+  display: flex;
+}
+
+.preview-overlay img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+}`;
+
+/**
+ * @label Image
+ * @tag base-image
+ * @rawTag image
+ *
+ * @summary Image
+ * @overview
+ *  - CodeHighlighter is a component that provides syntax highlighting for code snippets.
+ *  - It supports various programming languages and can display line numbers for better readability.
+ *
+ * @example
+ * ```html
+ * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
+ *   function helloWorld() {
+ *     console.log('Hello, world!');
+ *   }</code></pre>
+ * </code-highlighter>
+ * ```
+ * @tags display
+ */
+class Image extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Primary image source */
+        this.src = '';
+        /** Optional dark-mode image source */
+        this.darkSrc = '';
+        /** Alt text / title for the image */
+        this.imageTitle = '';
+        /** Enable click-to-preview lightbox */
+        this.preview = false;
+        this._isDarkMode = isDarkMode();
+        this._loaded = false;
+        this._previewOpen = false;
+        this._intersectionObserver = null;
+        this._themeCleanup = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Theme observation
+        this._themeCleanup = observeThemeChange(() => {
+            this._isDarkMode = isDarkMode();
+            // Reset lazy-load state so new src is loaded when visible
+            this._loaded = false;
+            this._setupIntersectionObserver();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._intersectionObserver?.disconnect();
+        this._themeCleanup?.();
+    }
+    firstUpdated() {
+        this._setupIntersectionObserver();
+    }
+    _setupIntersectionObserver() {
+        this._intersectionObserver?.disconnect();
+        const wrapper = this.shadowRoot?.querySelector('.image-wrapper');
+        if (!wrapper)
+            return;
+        this._intersectionObserver = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                this._loaded = true;
+                this._intersectionObserver?.disconnect();
+            }
+        }, { rootMargin: '200px' } // start loading slightly before entering viewport
+        );
+        this._intersectionObserver.observe(wrapper);
+    }
+    get _activeSrc() {
+        return this._isDarkMode && this.darkSrc ? this.darkSrc : this.src;
+    }
+    _handleClick() {
+        if (this.preview) {
+            this._previewOpen = true;
+        }
+    }
+    _closePreview(e) {
+        e.stopPropagation();
+        this._previewOpen = false;
+    }
+    render() {
+        return b `
+      <div class="image-wrapper">
+        ${this._loaded
+            ? b `<img
+              src=${this._activeSrc}
+              alt=${this.imageTitle}
+              class=${this.preview ? 'clickable' : ''}
+              @click=${this._handleClick}
+            />`
+            : b `<span class="placeholder" aria-hidden="true"></span>`}
+      </div>
+
+      <!-- Lightbox preview overlay (inside shadow root) -->
+      <div
+        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Image preview"
+        @click=${this._closePreview}
+        @keydown=${(e) => e.key === 'Escape' && this._closePreview(e)}
+      >
+        <img src=${this._activeSrc} alt=${this.imageTitle} @click=${(e) => e.stopPropagation()} />
+      </div>
+    `;
+    }
+}
+Image.styles = [css_248z];
+__decorate([
+    n({ reflect: true })
+], Image.prototype, "src", void 0);
+__decorate([
+    n({ reflect: true, attribute: 'dark-src' })
+], Image.prototype, "darkSrc", void 0);
+__decorate([
+    n({ attribute: 'image-title' })
+], Image.prototype, "imageTitle", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Image.prototype, "preview", void 0);
+__decorate([
+    r()
+], Image.prototype, "_isDarkMode", void 0);
+__decorate([
+    r()
+], Image.prototype, "_loaded", void 0);
+__decorate([
+    r()
+], Image.prototype, "_previewOpen", void 0);
+
+export { Accordion as A, Badge as B, Chip as C, DatePicker as D, Elevation as E, Field as F, Icon as I, LinearProgress as L, NumberField as N, Ripple as R, Skeleton as S, Tag as T, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, CircularProgress as d, Container as e, Divider as f, EmptyState as g, FocusRing as h, IconButton as i, Image as j, Input as k, Link as l, Spinner as m, Switch as n, Textarea as o, TimePicker as p, Tooltip as q };
+//# sourceMappingURL=image-v3BujlY5.js.map