@portfoliablejs/valence 0.1.0

package/src/stories/sub-atomic/Surfaceography/surfaceography.css

@@ -0,0 +1,54 @@
+:root {
+  /* Surface Elevation Variables */
+  --surface-canvas: var(--color-bg);
+  --surface-card: var(--color-card-bg);
+  --surface-raised: var(--color-bg);
+  --surface-overlay: var(--color-bg);
+  --surface-glass: var(--overlay-glass-bg);
+  --surface-modal: var(--color-bg);
+
+  /* Surface Shadow Mapping */
+  --surface-shadow-level-0: var(--shadow-none);
+  --surface-shadow-level-1: var(--shadow-sm);
+  --surface-shadow-level-2: var(--shadow-md);
+  --surface-shadow-level-3: var(--shadow-lg);
+  --surface-shadow-level-4: var(--shadow-md);
+  --surface-shadow-level-5: var(--shadow-xl);
+}
+
+/* Surface Utility Classes */
+.surface-canvas {
+  background-color: var(--surface-canvas);
+}
+
+.surface-card {
+  background-color: var(--surface-card);
+  border: var(--border-width-thin) var(--border-style-solid) var(--color-card-border);
+  box-shadow: var(--surface-shadow-level-1);
+}
+
+.surface-raised {
+  background-color: var(--surface-raised);
+  border: var(--border-width-thin) var(--border-style-solid) var(--color-card-border);
+  box-shadow: var(--surface-shadow-level-2);
+}
+
+.surface-overlay {
+  background-color: var(--surface-overlay);
+  box-shadow: var(--surface-shadow-level-3);
+  z-index: var(--z-dropdown);
+}
+
+.surface-glass {
+  background: var(--surface-glass);
+  backdrop-filter: blur(var(--overlay-glass-blur));
+  -webkit-backdrop-filter: blur(var(--overlay-glass-blur));
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--color-card-border);
+}
+
+.surface-modal {
+  background-color: var(--surface-modal);
+  box-shadow: var(--surface-shadow-level-5);
+  border-radius: var(--radius-lg);
+  z-index: var(--z-modal);
+}

package/src/stories/sub-atomic/Thumbnails/Thumbnails.mdx

@@ -0,0 +1,221 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Sub-atomic/Thumbnails" />
+
+# Thumbnail
+
+The Thumbnail component (`<ds-thumbnail>`) is a framework-agnostic Web Component designed to showcase application screenshots, responsive designs, and portfolio projects inside physical device mockups (phones, laptops, tablets, wearables, and TVs).
+
+It uses a 2-layer Shadow DOM architecture combined with an automated canvas flood-fill mask generator that dynamically clips screen images to device bezels with subpixel precision.
+
+<br />
+
+## Architecture Overview
+
+`<ds-thumbnail>` maintains two independent visual layers inside its Shadow DOM:
+
+1. **Screen Cover Layer (`.screen-cover`, z-index: 1):** The background image provided via the `screen-image` attribute.
+2. **Device Frame Layer (`.device-image`, z-index: 2):** The physical device frame overlay (`.avif` asset from `DEVICE_CATALOG`).
+
+
+```
+
++------------------------------------------+
+|  .frame-container                        |
+|                                          |
+|  +------------------------------------+  |
+|  |  .device-image (Z-Index: 2)        |  |  <- Physical Bezel Overlay
+|  |  +------------------------------+  |  |
+|  |  |  .screen-cover (Z-Index: 1)  |  |  |  <- Clipped & Bounded Screenshot
+|  |  |  (Clipped by generated mask) |  |  |
+|  |  +------------------------------+  |  |
+|  +------------------------------------+  |
++------------------------------------------+
+
+```
+
+<br />
+
+## Attributes & Component API
+
+The `<ds-thumbnail>` component accepts the following attributes for frame selection, image binding, and state control:
+
+<table style={{ width: '100%', borderCollapse: 'collapse' }}>
+  <thead>
+    <tr>
+      <th style={{ textAlign: 'left' }}>Attribute</th>
+      <th style={{ textAlign: 'left' }}>Type</th>
+      <th style={{ textAlign: 'left' }}>Default</th>
+      <th style={{ textAlign: 'left' }}>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>category</code></td>
+      <td><code>String</code></td>
+      <td><code>'mobile'</code></td>
+      <td>Device category from catalog (e.g., <code>mobile</code>, <code>desktop</code>, <code>tablet</code>, <code>wearable</code>, <code>television</code>).</td>
+    </tr>
+    <tr>
+      <td><code>brand</code></td>
+      <td><code>String</code></td>
+      <td>First brand in category</td>
+      <td>Brand ecosystem filter (e.g., <code>apple</code>, <code>samsung</code>, <code>google</code>).</td>
+    </tr>
+    <tr>
+      <td><code>model</code></td>
+      <td><code>String</code></td>
+      <td>First model in brand</td>
+      <td>Specific device model (e.g., <code>Apple iPhone 13</code>, <code>Apple MacBook Pro</code>).</td>
+    </tr>
+    <tr>
+      <td><code>color</code></td>
+      <td><code>String</code></td>
+      <td>First available color</td>
+      <td>Device body finish variant matching catalog assets (e.g., <code>Midnight</code>, <code>Space Grey</code>).</td>
+    </tr>
+    <tr>
+      <td><code>screen-image</code></td>
+      <td><code>URL String</code></td>
+      <td><code>''</code></td>
+      <td><strong>Mandatory.</strong> The project screenshot URL rendered inside the device display bounds.</td>
+    </tr>
+    <tr>
+      <td><code>custom-only</code></td>
+      <td><code>Boolean</code></td>
+      <td><code>false</code></td>
+      <td>Cancels the device frame overlay entirely and presents unconstrained image card styling with shadows and radii.</td>
+    </tr>
+    <tr>
+      <td><code>max-height</code></td>
+      <td><code>CSS Dimension</code></td>
+      <td><code>'100%'</code></td>
+      <td>Constraint height setting `--custom-max-height` to prevent large desktop mockups from overflowing viewports.</td>
+    </tr>
+    <tr>
+      <td><code>disabled</code></td>
+      <td><code>Boolean</code></td>
+      <td><code>false</code></td>
+      <td>Reduces opacity (`var(--opacity-disabled)`) and locks pointer events (`cursor: not-allowed`).</td>
+    </tr>
+    <tr>
+      <td><code>aria-label</code></td>
+      <td><code>String</code></td>
+      <td><code>'Thumbnail Mockup'</code></td>
+      <td>Delegated accessibility label. Automatically scrubbed from host tag to prevent DOM compliance violations.</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+## Dual-Performance Architecture (Editor vs. Production)
+
+To ensure high rendering speeds across live preview editors and hosted static portfolios, `<ds-thumbnail>` supports a hybrid execution pipeline:
+
+### 1. Dev / Editor Mode (Live Canvas Processing)
+* Runs the automated perimeter flood-fill algorithm in real time when swapping devices or colors.
+* Performs **2px mask dilation** into the inner bezel to eliminate subpixel anti-aliasing alpha gaps around curved corners and straight edges.
+* Generates lightweight, temporary memory Blob URLs via `URL.createObjectURL(blob)` instead of heavy Base64 strings to prevent main-thread memory spikes during editing sessions.
+
+### 2. Production Mode (Zero-Latency Manifest Lookup)
+* When building/exporting portfolios, a build script pre-calculates bounds and mask metadata into a `thumbnail-manifest.json`.
+* At runtime, `<ds-thumbnail>` checks `window.__THUMBNAIL_MANIFEST__` or `registerDeviceManifest()`.
+* **Result:** **0ms canvas execution time** on production page loads, bypassing canvas loops entirely.
+
+<br />
+
+## Sub-Atomic Property Overrides
+
+Components accept sub-atomic variable overrides for dynamic layout constraints and fallback styling:
+
+```css
+ds-thumbnail {
+  /* Override maximum dimensions */
+  --custom-max-width: 600px;
+  --custom-max-height: 400px;
+
+  /* Custom corner radius fallback when [custom-only] is active */
+  --custom-screen-radius: var(--radius-lg);
+}
+
+```
+
+## Implementation Examples
+
+### 1. Standard Mobile Device Framing
+
+```html
+<ds-thumbnail
+  category="mobile"
+  brand="apple"
+  model="Apple iPhone 13"
+  color="Midnight"
+  screen-image="[https://my-domain.com/assets/app-screenshot.png](https://my-domain.com/assets/app-screenshot.png)"
+  max-height="500px">
+</ds-thumbnail>
+
+```
+
+### 2. Desktop Mockup in Single Page Application (SPA)
+
+```html
+<ds-thumbnail
+  category="desktop"
+  brand="apple"
+  model="Apple MacBook Pro"
+  color="Space Grey"
+  screen-image="[https://my-domain.com/assets/dashboard.png](https://my-domain.com/assets/dashboard.png)"
+  max-height="400px">
+</ds-thumbnail>
+
+```
+
+### 3. Production Manifest Injection (Zero-Latency Load)
+
+```html
+<script type="module">
+  import { registerDeviceManifest } from './Thumbnail.js';
+
+  // Register pre-generated bounds at app startup
+  registerDeviceManifest({
+    "/src/stories/assets/mockups/mobile/apple/iPhone-13/Midnight.avif": {
+      bounds: { top: 11.2, left: 4.8, width: 90.4, height: 77.6 }
+    }
+  });
+</script>
+
+<ds-thumbnail
+  category="mobile"
+  model="Apple iPhone 13"
+  screen-image="/uploads/portfolio-screen.png">
+</ds-thumbnail>
+
+```
+
+### 4. Custom Image Only (Frame Cancellation)
+
+```html
+<ds-thumbnail
+  custom-only
+  screen-image="[https://my-domain.com/assets/design-preview.png](https://my-domain.com/assets/design-preview.png)"
+  max-height="350px">
+</ds-thumbnail>
+
+```
+
+## Accessibility & System Syncing
+
+`<ds-thumbnail>` integrates with platform-wide accessibility controls via root attribute syncing:
+
+* **High Contrast Mode (`:host([a11y-high-contrast])`):** Disables filters and blurs, enforcing clear high-visibility borders around the frame and screen cover.
+* **Forced Colors Mode (`@media (forced-colors: active)`):** Suppresses forced color adjustments on image layers to prevent browser canvas flattening from destroying screen artwork.
+* **Reduced Motion Mode (`:host([a11y-reduce-motion])`):** Suppresses CSS scale and transform transitions during state updates or view resizing.
+* **Focus States (`:focus-visible`):** Enforces high-visibility focus indicators (`var(--a11y-focus-outline)`) around active frames during keyboard navigation.
+
+## Best Practices
+
+* **Layer Preservation:** Never flatten screen images and device mockups into a single composite image file. Keeping them as separate DOM layers preserves crispness on 4K/Retina displays, enables GPU acceleration during view resizes, and maintains accessibility.
+* **Viewport Scaling:** Always pass a `max-height` attribute (or set `--custom-max-height`) on desktop and television mockups to prevent large assets from pushing adjacent content out of view.
+* **Build Optimization:** Pre-generate device bounds using `exportPortfolioDeviceManifest()` during static site builds to ensure instant page rendering on hosted production portfolios.
+* **Touch Target & Focus:** Ensure interactive thumbnails inside cards include explicit `aria-label` descriptors for screen readers.

package/src/stories/sub-atomic/Typography/Typography.mdx

@@ -0,0 +1,201 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+
+<Meta title="Sub-atomic/Typography" />
+
+# Typography
+
+The Typography system establishes standard font families, 
+scales, weights, and letter-spacing for the Valence platform. Consistent typographic hierarchy ensures readability, 
+structural flow, and visual balance across all interface text elements.
+
+<br />
+## Font Families
+
+Valence uses system font stacks for optimal performance, native feel, and legibility across all platforms. 
+Because browsers don't have to fetch external web fonts (like those from Google Fonts), you 
+eliminate extra HTTP requests and avoid text-rendering delays like FOUT (Flash of Unstyled Text).
+
+<table style={{ width: '100%', borderCollapse: 'collapse' }}>
+  <thead>
+    <tr>
+      <th style={{ textAlign: 'left' }}>Type</th>
+      <th style={{ textAlign: 'left' }}>CSS Variable</th>
+      <th style={{ textAlign: 'left' }}>Value Stack</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><strong>Sans-Serif (Primary)</strong></td>
+      <td>`var(--font-family)`</td>
+      <td>`-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif`</td>
+    </tr>
+    <tr>
+      <td><strong>Monospace</strong></td>
+      <td>`var(--font-mono)`</td>
+      <td>`"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+## Headings Scale
+
+Heading styles guide user scanning and define clear visual hierarchy.
+
+**Font Family:** `var(--font-family)`  
+**Sample:** *The quick brown fox jumps over the lazy dog*
+
+<Typeset
+  fontSizes={[
+    '38px',
+    '36px',
+    '20px',
+    '22px'
+  ]}
+  fontWeight={500}
+  sampleText="The quick brown fox jumps over the lazy dog"
+  fontFamily="var(--font-family)"
+/>
+
+<table style={{ width: '100%', borderCollapse: 'collapse' }}>
+  <thead>
+    <tr>
+      <th style={{ textAlign: 'left' }}>Element</th>
+      <th style={{ textAlign: 'left' }}>Size</th>
+      <th style={{ textAlign: 'left' }}>Weight</th>
+      <th style={{ textAlign: 'left' }}>Line Height</th>
+      <th style={{ textAlign: 'left' }}>Letter Spacing</th>
+      <th style={{ textAlign: 'left' }}>Color</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`<h1>`</td>
+      <td>`38px`</td>
+      <td>`500` (Medium)</td>
+      <td>`0.8`</td>
+      <td>`-0.04em`</td>
+      <td>Default / `--color-black`</td>
+    </tr>
+    <tr>
+      <td>`<h2>`</td>
+      <td>`36px`</td>
+      <td>`600` (Semi-Bold)</td>
+      <td>`1.0`</td>
+      <td>`-0.02em`</td>
+      <td>Default / `--color-black`</td>
+    </tr>
+    <tr>
+      <td>`<h3>`</td>
+      <td>`20px`</td>
+      <td>`600` (Semi-Bold)</td>
+      <td>`1.0`</td>
+      <td>`-0.02em`</td>
+      <td>Default / `--color-black`</td>
+    </tr>
+    <tr>
+      <td>`<h4>`</td>
+      <td>`22px`</td>
+      <td>`250` (Light)</td>
+      <td>`0.8`</td>
+      <td>`-0.04em`</td>
+      <td>`var(--color-gray-med)`</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+## Body & Paragraph Scale
+
+Paragraph tokens handle core body copy, descriptions, and supporting information.
+
+**Font Family:** `var(--font-family)`  
+**Sample:** *Lio started his career as a Graphic Designer, and fell in love with the intersection of design and technology.*
+
+<Typeset
+  fontSizes={[
+    '18px',
+    '17px'
+  ]}
+  fontWeight={400}
+  sampleText="Lio started his career as a Graphic Designer, and fell in love with the intersection of design and technology."
+  fontFamily="var(--font-family)"
+/>
+
+<table style={{ width: '100%', borderCollapse: 'collapse' }}>
+  <thead>
+    <tr>
+      <th style={{ textAlign: 'left' }}>Class</th>
+      <th style={{ textAlign: 'left' }}>Size</th>
+      <th style={{ textAlign: 'left' }}>Weight</th>
+      <th style={{ textAlign: 'left' }}>Line Height</th>
+      <th style={{ textAlign: 'left' }}>Letter Spacing</th>
+      <th style={{ textAlign: 'left' }}>Color / Usage</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`.p1`</td>
+      <td>`18px`</td>
+      <td>`400` (Regular)</td>
+      <td>`1.1`</td>
+      <td>`-0.02em`</td>
+      <td>Primary body text, lead paragraphs, card summaries.</td>
+    </tr>
+    <tr>
+      <td>`.p2`</td>
+      <td>`17px`</td>
+      <td>`300` (Light)</td>
+      <td>`0.8`</td>
+      <td>`-0.02em`</td>
+      <td>Secondary description text (`var(--color-gray-med)`).</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+## Usage Guidelines
+
+Typography resets are automatically applied to the Light DOM `body` tag. Use standard semantic HTML elements (`<h1>` - `<h4>`) or structural classes (`.p1`, `.p2`) when building Web Components.
+
+### Basic Implementation
+
+```html
+<h1>Main Dashboard Header</h1>
+<h2>Section Title</h2>
+<h3>Sub-section Header</h3>
+<h4 style="color: var(--color-gray-med);">Supporting Subtitle</h4>
+
+<p class="p1">
+  Lio started his career as a Graphic Designer, and fell in love with the intersection of design and technology.
+</p>
+
+<p class="p2">
+  He holds a NN/g UX Certification, a postgrad degree in User Experience, and is currently pursuing a Master's in Computer Science at BSU with a focus on HCI.
+</p>
+```
+
+## CSS Variable Usage
+```css
+.custom-title {
+  font-family: var(--font-family);
+  font-size: 38px;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  line-height: 0.8;
+}
+
+.code-snippet {
+  font-family: var(--font-mono);
+}
+```
+
+## Best Practices
+- Semantic Hierarchy: Maintain logical heading depth (`<h1>` down to `<h4>`). Avoid skipping heading levels solely for visual sizing.
+- Font Rendering: WebKit antialiasing (`-webkit-font-smoothing: antialiased`) is applied globally to maintain clean vector rendering across high-DPI and Retina displays.
+- Color Contrast: Standard heading text renders against `--color-black`. For muted subtitles (`h4`, `.p2`), verify contrast compliance against light and dark background surfaces.
+
+> **Note**: Differences in character widths and glyph sizing across various operating systems can affect how text flows, making complex, pixel-perfect designs harder to maintain.

package/src/stories/sub-atomic/Typography/typography.css

@@ -0,0 +1,23 @@
+:root {
+  /* Modernized System Font Stacks */
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+/* Global Typography Resets */
+body {
+  font-family: var(--font-family);
+  color: var(--color-black);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Headings with non-clipping line heights */
+h1 { font-weight: 550; font-size: 39px; letter-spacing: -0.04em; line-height: 1.0; }
+h2 { font-weight: 600; font-size: 36px; letter-spacing: -0.02em; line-height: 1.0; }
+h3 { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1.1; }
+h4 { font-weight: 300; font-size: 22px; letter-spacing: -0.04em; line-height: 1.0; color: var(--color-gray-med); }
+
+/* Paragraph variants */
+.p1 { font-weight: 400; font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; }
+.p2 { font-weight: 300; font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-gray-med); }
+.p3-footer { font-weight: 400; font-size: 14px; letter-spacing: -0.01em; line-height: 1.3; color: var(--color-gray-med); opacity: var(--opacity-medium); }

package/src/stories/sub-atomic/index.css

@@ -0,0 +1 @@
+@import '../../style.css';

package/src/stories/templates/HomeView/HomeView.js

@@ -0,0 +1,164 @@
+import css from './homeview.css?inline';
+import typographyCss from '../../sub-atomic/Typography/typography.css?inline';
+import '../../organisms/Header/Header.js';
+import '../../organisms/Gallery/Gallery.js';
+
+const DEFAULT_TITLE_TEXT = "Lio Schimanko's Portfolio";
+const DEFAULT_FOOTER_TEXT = '(c)2026 All trademarks are property of their owners.';
+const DEFAULT_GALLERY_COUNT = 4;
+
+const DEFAULT_BREADCRUMB_ITEMS = [
+  { id: 'home', label: 'Home', hasMenu: false },
+  { id: 'portfolio', label: 'Portfolio', hasMenu: false },
+  { id: 'homeview', label: 'Home View', hasMenu: false }
+];
+
+export class HomeView extends HTMLElement {
+  static get observedAttributes() {
+    return ['aria-label', 'title-text', 'footer-text', 'item-count', 'engine', 'show-breadcrumb', 'show-language-menu'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._breadcrumbItems = DEFAULT_BREADCRUMB_ITEMS;
+
+    this.shadowRoot.innerHTML = `
+      <style>${typographyCss}</style>
+      <style>${css}</style>
+      <section class="homeview-layout" aria-label="Home view template">
+        <div class="header-wrap">
+          <ds-header></ds-header>
+        </div>
+        <div class="homeview-shell">
+          <div class="title-wrap">
+            <h1 class="homeview-title"></h1>
+          </div>
+          <div class="gallery-wrap">
+            <div class="gallery-scale-shell">
+              <ds-gallery></ds-gallery>
+            </div>
+          </div>
+          <footer class="footer-wrap">
+            <p class="homeview-footer p3-footer"></p>
+          </footer>
+        </div>
+      </section>
+    `;
+  }
+
+  connectedCallback() {
+    this.layoutEl = this.shadowRoot.querySelector('.homeview-layout');
+    this.shellEl = this.shadowRoot.querySelector('.homeview-shell');
+    this.headerEl = this.shadowRoot.querySelector('ds-header');
+    this.titleEl = this.shadowRoot.querySelector('.homeview-title');
+    this.galleryEl = this.shadowRoot.querySelector('ds-gallery');
+    this.footerEl = this.shadowRoot.querySelector('.homeview-footer');
+    this.render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (this.layoutEl) {
+      this.render();
+    }
+  }
+
+  get titleText() {
+    return this.getAttribute('title-text') || DEFAULT_TITLE_TEXT;
+  }
+
+  set titleText(value) {
+    if (value === null || value === undefined || value === '') {
+      this.removeAttribute('title-text');
+      return;
+    }
+
+    this.setAttribute('title-text', String(value));
+  }
+
+  get footerText() {
+    return this.getAttribute('footer-text') || DEFAULT_FOOTER_TEXT;
+  }
+
+  set footerText(value) {
+    if (value === null || value === undefined || value === '') {
+      this.removeAttribute('footer-text');
+      return;
+    }
+
+    this.setAttribute('footer-text', String(value));
+  }
+
+  get itemCount() {
+    const parsed = Number.parseInt(this.getAttribute('item-count') || '', 10);
+    if (Number.isNaN(parsed)) return DEFAULT_GALLERY_COUNT;
+    return Math.max(1, Math.min(parsed, 8));
+  }
+
+  set itemCount(value) {
+    if (value === null || value === undefined || value === '') {
+      this.removeAttribute('item-count');
+      return;
+    }
+
+    this.setAttribute('item-count', String(value));
+  }
+
+  get engine() {
+    return this.getAttribute('engine') || 'minimal';
+  }
+
+  set engine(value) {
+    if (value === null || value === undefined || value === '') {
+      this.removeAttribute('engine');
+      return;
+    }
+
+    this.setAttribute('engine', String(value));
+  }
+
+  get showBreadcrumb() {
+    return this.getAttribute('show-breadcrumb') === 'true';
+  }
+
+  set showBreadcrumb(value) {
+    this.setAttribute('show-breadcrumb', value ? 'true' : 'false');
+  }
+
+  get showLanguageMenu() {
+    return this.getAttribute('show-language-menu') !== 'false';
+  }
+
+  set showLanguageMenu(value) {
+    this.setAttribute('show-language-menu', value ? 'true' : 'false');
+  }
+
+  get breadcrumbItems() {
+    return this._breadcrumbItems;
+  }
+
+  set breadcrumbItems(items) {
+    this._breadcrumbItems = Array.isArray(items) ? items : DEFAULT_BREADCRUMB_ITEMS;
+    this.render();
+  }
+
+  render() {
+    if (!this.layoutEl) return;
+
+    this.layoutEl.setAttribute('aria-label', this.getAttribute('aria-label') || 'Home view template');
+    this.titleEl.textContent = this.titleText;
+    this.footerEl.textContent = this.footerText;
+
+    this.headerEl.showBreadcrumb = this.showBreadcrumb;
+    this.headerEl.showLanguageMenu = this.showLanguageMenu;
+    this.headerEl.breadcrumbItems = this._breadcrumbItems;
+
+    this.galleryEl.itemCount = this.itemCount;
+    this.galleryEl.engine = this.engine;
+  }
+}
+
+if (!customElements.get('ds-home-view')) {
+  customElements.define('ds-home-view', HomeView);
+}