PhrontHQ · marchant · Aug 26, 2025 · Jul 23, 2025 · Jul 23, 2025 · Jul 25, 2025
diff --git a/index.html b/index.html
@@ -52,6 +52,7 @@ <h4>Components:</h4>
         <a href="ui/toggle.mod/teach/index.html">Toggle</a>
         <a href="ui/tree-list.mod/teach/index.html">TreeList</a>
         <a href="ui/virtual-list.mod/teach/index.html">VirtualList</a>
+        <a href="ui/image.mod/teach/index.html">Image</a>
 
         <h4>Managers:</h4>
         <a href="core/drag/drag.mod/teach/index.html">Drag & Drop</a>

diff --git a/ui/image.mod/image.js b/ui/image.mod/image.js
@@ -1,48 +1,64 @@
 /**
-    @module "mod/ui/native/image.mod"
-    @requires mod/ui/component
-    @requires mod/ui/native-control
-*/
-var Component = require("ui/component").Component;
+ * @module "mod/ui/native/image.mod"
+ * @requires mod/ui/component
+ * @requires mod/ui/native-control
+ */
+const Component = require("ui/component").Component;
+const Montage = require("core/core").Montage;
 
 /**
  * Wraps the a &lt;img> element with binding support for its standard attributes.
-   @class module:"mod/ui/native/image.mod".Image
-   @extends module:mod/ui/control.Control
+ * @class module:"mod/ui/native/image.mod".Image
+ * @extends module:mod/ui/control.Control
  */
-exports.Image = Component.specialize({
-    hasTemplate: {value: true }
-});
+const Image = class Image extends Component {
+    static {
+        Montage.defineProperties(this.prototype, {
+            hasTemplate: { value: true },
+        });
+    }
+};
 
-exports.Image.addAttributes(/** @lends module:"mod/ui/native/image.mod".Image */{
+/** @lends module:"mod/ui/native/image.mod".Image */
+Image.addAttributes({
+    /**
+     * A text description to display in place of the image.
+     * @type {string}
+     * @default null
+     */
+    alt: null,
 
-/**
-    A text description to display in place of the image.
-    @type {string}
-    @default null
-*/
-        alt: null,
+    /**
+     * The height of the image in CSS pixels.
+     * @type {number}
+     * @default null
+     */
+    height: null,
 
-/**
-    The height of the image in CSS pixels.
-    @type {number}
-    @default null
-*/
-        height: null,
-
-/**
-    The URL where the image is located.
-    @type {string}
-    @default null
-*/
-        src: null,
-
-/**
-    The width of the image in CSS pixels.
-    @type {number}
-    @default null
-*/
-        width: null
+    /**
+     * The URL where the image is located.
+     * @type {string}
+     * @default null
+     */
+    src: null,
 
+    /**
+     * The width of the image in CSS pixels.
+     * @type {number}
+     * @default null
+     */
+    width: null,
 
+    /**
+     * The loading strategy for the image.
+     * @type {string}
+     * @default "eager"
+     * @values ["eager", "lazy"]
+     */
+    loading: {
+        dataType: "string",
+        value: "eager",
+    },
 });
+
+exports.Image = Image;
diff --git a/ui/image.mod/teach/assets/banana.svg b/ui/image.mod/teach/assets/banana.svg
diff --git a/ui/image.mod/teach/index.html b/ui/image.mod/teach/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Teach SegmentControl Mod</title>
+
+        <script src="../../../montage.js"></script>
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "prototype": "mod/ui/loader.mod"
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <span class="loading"></span>
+    </body>
+</html>
diff --git a/ui/image.mod/teach/package.json b/ui/image.mod/teach/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "teach-segmented-bar-mod",
+	"private": true,
+    "dependencies": {
+        "mod": "*"
+    },
+    "mappings": {
+        "mod": "../../../"
+    }
+}
diff --git a/ui/image.mod/teach/ui/main.mod/main.css b/ui/image.mod/teach/ui/main.mod/main.css
@@ -0,0 +1,51 @@
+body {
+    font-family: -apple-system, Roboto, sans-serif;
+    background-color: #fafafa;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+
+    .card {
+        margin: 40px 0;
+        padding: 16px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        h2 {
+            margin: 0;
+            color: #333;
+        }
+
+        label {
+            min-width: 128px;
+            font-weight: 500;
+        }
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+    }
+
+    .column {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        align-items: flex-start;
+
+        &.stretch {
+            align-items: stretch;
+        }
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+    }
+}
diff --git a/ui/image.mod/teach/ui/main.mod/main.html b/ui/image.mod/teach/ui/main.mod/main.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <title>Teach Image Mod</title>
+        <link rel="stylesheet" type="text/css" href="main.css" />
+        <script type="text/mod-serialization">
+            {
+                "owner": {
+                    "values": {
+                        "element": {"#": "main"}
+                    }
+                },
+                "banana": {
+                    "prototype": "mod/ui/image.mod",
+                    "values": {
+                        "element": {"#": "banana"},
+                        "src": "assets/banana.svg"
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <div data-mod-id="main" class="Main">
+            <h1>Image</h1>
+
+            <!-- Default Cases -->
+            <div class="card column">
+                <h2>Basic Usage</h2>
+                <div class="row">
+                    <label>Banana (SVG):</label>
+                    <div data-mod-id="banana"></div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/ui/image.mod/teach/ui/main.mod/main.js b/ui/image.mod/teach/ui/main.mod/main.js
@@ -0,0 +1,5 @@
+const { Component } = require("mod/ui/component");
+
+exports.Main = class Main extends Component {
+
+};