@mcp-b/web-components 0.2.0

package/dist/utilities/icon-library.d.ts

@@ -0,0 +1,3 @@
+import { t as SigveloIcon } from "../icon-Ci9CPZJV.js";
+import { a as connectIcon, c as getObservedIcons, d as updateConnectedIcons, i as ResolveFunction, l as registerIconLibrary, n as Library, o as disconnectIcon, r as MutateFunction, s as getLibrary, t as IconElement, u as unregisterIconLibrary } from "../icon-library-D_if7p2h.js";
+export { type IconElement, type Library, type MutateFunction, type ResolveFunction, type SigveloIcon, connectIcon, disconnectIcon, getLibrary, getObservedIcons, registerIconLibrary, unregisterIconLibrary, updateConnectedIcons };

package/dist/utilities/icon-library.js

@@ -0,0 +1,93 @@
+import { connectIcon, disconnectIcon, getLibrary, getObservedIcons, registerIconLibrary, registerIconLibrary as registerIconLibrary$1, unregisterIconLibrary, updateConnectedIcons } from "@mcp-b/wc-support/utilities/icon-library";
+//#region src/utilities/icon-library.ts
+const encode = (svg) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
+registerIconLibrary$1("system", { resolve: (name, family) => {
+	if (name === "check" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
+      `);
+	if (name === "chevron-down" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>
+      `);
+	if (name === "chevron-left" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>
+      `);
+	if (name === "chevron-right" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
+      `);
+	if (name === "chevrons-right" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7l5 5l-5 5" /><path d="M13 7l5 5l-5 5" /></svg>
+      `);
+	if (name === "circle" && family === "filled") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" /></svg>
+      `);
+	if (name === "circle-x" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M10 10l4 4m0 -4l-4 4" /></svg>
+      `);
+	if (name === "color-picker" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 7l6 6" /><path d="M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z" /></svg>
+      `);
+	if (name === "copy" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" /></svg>
+      `);
+	if (name === "dots" && family === "filled") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /></svg>filled
+      `);
+	if (name === "eye" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>
+      `);
+	if (name === "eye-off" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>
+      `);
+	if (name === "file" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /></svg>
+      `);
+	if (name === "file-zip" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 20.735a2 2 0 0 1 -1 -1.735v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1" /><path d="M11 17a2 2 0 0 1 2 2v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a2 2 0 0 1 2 -2z" /><path d="M11 5l-1 0" /><path d="M13 7l-1 0" /><path d="M11 9l-1 0" /><path d="M13 11l-1 0" /><path d="M11 13l-1 0" /><path d="M13 15l-1 0" /></svg>
+      `);
+	if (name === "grip-horizontal" && family === "filled") return encode(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-grip-horizontal"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="5" cy="9" r="1" fill="currentColor" /><circle cx="5" cy="15" r="1" fill="currentColor" /><circle cx="12" cy="9" r="1" fill="currentColor" /><circle cx="12" cy="15" r="1" fill="currentColor" /><circle cx="19" cy="9" r="1" fill="currentColor" /><circle cx="19" cy="15" r="1" fill="currentColor" /></svg>`);
+	if (name === "grip-vertical" && family === "filled") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /><path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /><path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /><path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /><path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /><path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" fill="currentColor" /></svg>
+      `);
+	if (name === "minus" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /></svg>
+      `);
+	if (name === "music" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M13 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M9 17v-13h10v13" /><path d="M9 8h10" /></svg>
+      `);
+	if (name === "photo" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>
+      `);
+	if (name === "plus" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
+      `);
+	if (name === "selector" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l4 -4l4 4" /><path d="M16 15l-4 4l-4 -4" /></svg>
+      `);
+	if (name === "search" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+      `);
+	if (name === "share-3" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7z" /></svg>
+      `);
+	if (name === "star" && family === "filled") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" /></svg>
+      `);
+	if (name === "star" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+      `);
+	if (name === "upload" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 9l5 -5l5 5" /><path d="M12 4l0 12" /></svg>
+      `);
+	if (name === "user" && family === "filled") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d"M0 0h24v24H0z" fill="none"/><path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" /><path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
+      `);
+	if (name === "video" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" /><path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /></svg>
+      `);
+	if (name === "x" && family === "outline") return encode(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+      `);
+	return encode("");
+} });
+//#endregion
+export { connectIcon, disconnectIcon, getLibrary, getObservedIcons, registerIconLibrary, unregisterIconLibrary, updateConnectedIcons };

package/dist/utilities/localize.d.ts

@@ -0,0 +1,2 @@
+import { a as registerDefaultTranslation, i as Translation, n as Localize, o as registerTranslation, r as LocalizeController, s as update, t as BaseTranslation } from "../localize-322EtXNX.js";
+export { type BaseTranslation, Localize, LocalizeController, Translation, registerDefaultTranslation, registerTranslation, update };

package/dist/utilities/localize.js

@@ -0,0 +1,6 @@
+import { LocalizeController, LocalizeController as LocalizeController$1, registerDefaultTranslation, registerTranslation, update } from "@mcp-b/wc-support";
+//#region src/utilities/localize.ts
+/** `LocalizeController` pre-typed with the Sigvelo component library translations. */
+var Localize = class extends LocalizeController$1 {};
+//#endregion
+export { Localize, LocalizeController, registerDefaultTranslation, registerTranslation, update };

package/dist/zoomable-frame-Cldvj5sE.js

@@ -0,0 +1,398 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { parseDelimitedTokens } from "@mcp-b/wc-support/utilities/parse";
+//#region src/components/zoomable-frame/zoomable-frame.styles.ts
+var zoomable_frame_styles_default = css`
+  :host {
+    display: block;
+    position: relative;
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--sigvelo-radius-md);
+  }
+
+  #frame-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% / var(--zoom));
+    height: calc(100% / var(--zoom));
+    transform: scale(var(--zoom));
+    transform-origin: 0 0;
+  }
+
+  #iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: inherit;
+    /* Prevent the iframe from being selected, e.g. by a double click. Doesn't affect selection withing the iframe. */
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  #controls {
+    display: flex;
+    position: absolute;
+    bottom: 0.5em;
+    align-items: center;
+    padding: 0.25em 0.5em;
+    gap: 0.5em;
+    border-radius: 0.375em;
+    background: #000b;
+    color: white;
+    font-size: min(12px, 0.75em);
+    user-select: none;
+    -webkit-user-select: none;
+
+    &:dir(ltr) {
+      right: 0.5em;
+    }
+
+    &:dir(rtl) {
+      left: 0.5em;
+    }
+
+    button {
+      display: flex;
+      align-items: center;
+      padding: 0.25em;
+      border: none;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+
+      &:active:not(:disabled) {
+        translate: 0 var(--sigvelo-motion-distance-xs);
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: var(--sigvelo-focus-ring);
+        outline-offset: calc(var(--sigvelo-border-width) * -1);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+
+    sigvelo-icon,
+    ::slotted(sigvelo-icon) {
+      font-size: 1.25em;
+    }
+
+    span {
+      min-width: 4.5ch; /* extra space so numbers don't shift */
+      font-variant-numeric: tabular-nums;
+      text-align: center;
+    }
+  }
+`;
+//#endregion
+//#region src/components/zoomable-frame/zoomable-frame.ts
+/**
+* <sigvelo-zoomable-frame>
+*
+* @summary Renders iframe content with zoom and interaction controls.
+* @tag sigvelo-zoomable-frame
+* @documentation https://design-system.sigvelo.com/docs/components/zoomable-frame
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot zoom-in-icon - The slot that contains the zoom in icon.
+* @slot zoom-out-icon - The slot that contains the zoom out icon.
+*
+* @event load - Emitted when the internal iframe when it finishes loading.
+* @event error - Emitted from the internal iframe when it fails to load.
+*
+* @csspart iframe - The internal `<iframe>` element.
+* @csspart controls - The container that surrounds zoom control buttons.
+* @csspart zoom-in-button - The zoom in button.
+* @csspart zoom-out-button - The zoom out button.
+*
+* @cssproperty [--aspect-ratio=16/9] - The aspect ratio of the frame.
+*
+* @cssstate loading - Applied when the iframe is loading.
+* @cssstate error - Applied when the iframe failed to load.
+*
+* @example Default
+* ```html
+* <sigvelo-zoomable-frame src="https://design-system.sigvelo.com/" zoom="0.5">
+* </sigvelo-zoomable-frame>
+* ```
+*
+* @example Providing content
+* Use the `src` attribute to load content from a URL. This is useful for embedding external websites or resources. Ensure the URL is accessible and, if cross-origin, be aware that access to the iframe’s `document` or `window` may be restricted due to the Same-Origin Policy.
+*
+* ```html
+* <sigvelo-zoomable-frame src="https://example.com/">
+* </sigvelo-zoomable-frame>
+* ```
+*
+* By default, the zoomable frame spans 100% of the width and uses a 16/9 aspect ratio. You can adjust this using the `aspect-ratio` CSS property.
+*
+* ```html
+* <sigvelo-zoomable-frame src="https://example.com/" style="aspect-ratio: 4/3;">
+* </sigvelo-zoomable-frame>
+* ```
+*
+* Use the `srcdoc` attribute or property to render inline HTML content directly within the iframe. This is ideal for displaying custom HTML without needing an external resource.
+*
+* ```html
+* <sigvelo-zoomable-frame srcdoc="<html><body><h1>Hello, World!</h1><p>This is inline content.</p></body></html>">
+* </sigvelo-zoomable-frame>
+* ```
+*
+* **Note:** If both `src` and `srcdoc` are provided, `srcdoc` takes precedence.
+*
+* @example Zooming
+* Set the `zoom` attribute to change the frame's zoom level. A value of `1` means 100%, a value of `2` means 200%, etc.
+*
+* Use the `zoom-levels` attribute to define specific zoom steps that users can navigate through with the zoom controls. You can specify levels as a space-delimited set of percentages and decimal values, e.g. `zoom-levels="0.25 0.5 75% 100%"`.
+*
+* ```html
+* <sigvelo-zoomable-frame
+*   src="https://design-system.sigvelo.com/"
+*   zoom="0.5"
+*   zoom-levels="50% 0.75 100%"
+* >
+* </sigvelo-zoomable-frame>
+* ```
+*
+* @example Removing zoom controls
+* Add the `without-controls` attribute to remove the zoom controls from the frame.
+*
+* ```html
+* <sigvelo-zoomable-frame
+*   src="https://design-system.sigvelo.com/"
+*   without-controls
+*   zoom="0.5"
+* >
+* </sigvelo-zoomable-frame>
+* ```
+*
+* @example Disabling interactions
+* To make the frame inert, add the `without-interaction` attribute. Users won't be able to tab into the frame when this is applied, potentially affecting accessibility.
+*
+* ```html
+* <sigvelo-zoomable-frame
+*   src="https://design-system.sigvelo.com/"
+*   zoom="0.5"
+*   without-interaction
+* >
+* </sigvelo-zoomable-frame>
+* ```
+*
+* @example Browser frame example
+* Zoomable frames work really well with browser frames.
+*
+* ```html
+* <sigvelo-browser-frame label="Sigvelo" style="--body-padding: 0;">
+*   <sigvelo-zoomable-frame src="https://design-system.sigvelo.com/" zoom="0.5">
+*   </sigvelo-zoomable-frame>
+* </sigvelo-browser-frame>
+* ```
+*/
+var SigveloZoomableFrame = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.availableZoomLevels = [];
+		this.label = "Embedded content";
+		this.allowfullscreen = false;
+		this.loading = "eager";
+		this.zoom = 1;
+		this.zoomLevels = "25% 50% 75% 100% 125% 150% 175% 200%";
+		this.withoutControls = false;
+		this.withoutInteraction = false;
+	}
+	static {
+		this.styles = [zoomable_frame_styles_default];
+	}
+	/** Returns the internal iframe's `window` object. (Readonly property) */
+	get contentWindow() {
+		return this.iframe?.contentWindow || null;
+	}
+	/** Returns the internal iframe's `document` object. (Readonly property) */
+	get contentDocument() {
+		return this.iframe?.contentDocument || null;
+	}
+	parseZoomLevels(zoomLevelsString) {
+		const tokens = parseDelimitedTokens(zoomLevelsString);
+		const levels = [];
+		for (const token of tokens) {
+			let value;
+			if (token.endsWith("%")) {
+				const percentage = parseFloat(token.slice(0, -1));
+				if (!isNaN(percentage)) value = Math.max(0, percentage / 100);
+				else continue;
+			} else {
+				value = parseFloat(token);
+				if (!isNaN(value)) value = Math.max(0, value);
+				else continue;
+			}
+			levels.push(value);
+		}
+		return [...new Set(levels)].toSorted((a, b) => a - b);
+	}
+	getCurrentZoomIndex() {
+		if (this.availableZoomLevels.length === 0) return -1;
+		let closestIndex = 0;
+		let closestDiff = Math.abs(this.availableZoomLevels[0] - this.zoom);
+		for (let i = 1; i < this.availableZoomLevels.length; i++) {
+			const diff = Math.abs(this.availableZoomLevels[i] - this.zoom);
+			if (diff < closestDiff) {
+				closestDiff = diff;
+				closestIndex = i;
+			}
+		}
+		return closestIndex;
+	}
+	isZoomInDisabled() {
+		if (this.availableZoomLevels.length === 0) return false;
+		return this.getCurrentZoomIndex() >= this.availableZoomLevels.length - 1;
+	}
+	isZoomOutDisabled() {
+		if (this.availableZoomLevels.length === 0) return false;
+		return this.getCurrentZoomIndex() <= 0;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("src") || changedProperties.has("srcdoc")) {
+			this.customStates.set("loading", true);
+			this.customStates.set("error", false);
+		}
+		if (changedProperties.has("zoom")) this.style.setProperty("--zoom", `${this.zoom}`);
+		if (changedProperties.has("zoomLevels")) {
+			this.availableZoomLevels = this.parseZoomLevels(this.zoomLevels);
+			if (this.availableZoomLevels.length > 0) {
+				const currentIndex = this.getCurrentZoomIndex();
+				if (Math.abs(this.availableZoomLevels[currentIndex] - this.zoom) > .001) this.zoom = this.availableZoomLevels[currentIndex];
+			}
+		}
+	}
+	/** Zooms in to the next available zoom level. */
+	zoomIn() {
+		if (this.availableZoomLevels.length === 0) {
+			this.zoom = Math.min(this.zoom + .05, 2);
+			return;
+		}
+		const currentIndex = this.getCurrentZoomIndex();
+		if (currentIndex < this.availableZoomLevels.length - 1) this.zoom = this.availableZoomLevels[currentIndex + 1];
+	}
+	/** Zooms out to the previous available zoom level. */
+	zoomOut() {
+		if (this.availableZoomLevels.length === 0) {
+			this.zoom = Math.max(this.zoom - .05, 0);
+			return;
+		}
+		const currentIndex = this.getCurrentZoomIndex();
+		if (currentIndex > 0) this.zoom = this.availableZoomLevels[currentIndex - 1];
+	}
+	handleLoad() {
+		this.customStates.set("loading", false);
+		this.dispatchEvent(new Event("load", {
+			bubbles: false,
+			cancelable: false,
+			composed: true
+		}));
+	}
+	handleError() {
+		this.customStates.set("loading", false);
+		this.customStates.set("error", true);
+		this.dispatchEvent(new Event("error", {
+			bubbles: false,
+			cancelable: false,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <div id="frame-container">
+        <iframe
+          id="iframe"
+          part="iframe"
+          title=${this.label}
+          ?inert=${this.withoutInteraction}
+          ?allowfullscreen=${this.allowfullscreen}
+          loading=${this.loading}
+          referrerpolicy=${this.referrerpolicy}
+          sandbox=${ifDefined(this.sandbox ?? void 0)}
+          src=${ifDefined(this.src ?? void 0)}
+          srcdoc=${ifDefined(this.srcdoc ?? void 0)}
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+        ></iframe>
+      </div>
+
+      ${!this.withoutControls ? html`
+            <div id="controls" part="controls">
+              <button
+                part="zoom-out-button"
+                aria-label=${this.localize.term("zoomOut")}
+                @click=${this.zoomOut}
+                ?disabled=${this.isZoomOutDisabled()}
+              >
+                <slot name="zoom-out-icon">
+                  <sigvelo-icon name="minus" label="Zoom out"></sigvelo-icon>
+                </slot>
+              </button>
+              <span
+                >${this.localize.number(this.zoom, {
+			style: "percent",
+			maximumFractionDigits: 1
+		})}</span
+              >
+              <button
+                part="zoom-in-button"
+                aria-label=${this.localize.term("zoomIn")}
+                @click=${this.zoomIn}
+                ?disabled=${this.isZoomInDisabled()}
+              >
+                <slot name="zoom-in-icon">
+                  <sigvelo-icon name="plus" label="Zoom in"></sigvelo-icon>
+                </slot>
+              </button>
+            </div>
+          ` : ""}
+    `;
+	}
+};
+__decorate([query("#iframe")], SigveloZoomableFrame.prototype, "iframe", void 0);
+__decorate([property()], SigveloZoomableFrame.prototype, "src", void 0);
+__decorate([property()], SigveloZoomableFrame.prototype, "srcdoc", void 0);
+__decorate([property()], SigveloZoomableFrame.prototype, "label", void 0);
+__decorate([property({ type: Boolean })], SigveloZoomableFrame.prototype, "allowfullscreen", void 0);
+__decorate([property()], SigveloZoomableFrame.prototype, "loading", void 0);
+__decorate([property()], SigveloZoomableFrame.prototype, "referrerpolicy", void 0);
+__decorate([property()], SigveloZoomableFrame.prototype, "sandbox", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], SigveloZoomableFrame.prototype, "zoom", void 0);
+__decorate([property({ attribute: "zoom-levels" })], SigveloZoomableFrame.prototype, "zoomLevels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "without-controls",
+	reflect: true
+})], SigveloZoomableFrame.prototype, "withoutControls", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "without-interaction",
+	reflect: true
+})], SigveloZoomableFrame.prototype, "withoutInteraction", void 0);
+customElements.define("sigvelo-zoomable-frame", SigveloZoomableFrame);
+//#endregion
+export { SigveloZoomableFrame as t };