From c3458a7ade2299239c67eddb8c871304cb79a490 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Sun, 1 Jun 2025 19:43:09 +0200
Subject: [PATCH] feat: change tone of copy text

---
 index.html | 612 +++++++++++++++++++++--------------------------------
 1 file changed, 240 insertions(+), 372 deletions(-)
diff --git a/index.html b/index.html
index 7ac3bc2..660b56f 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
-  <title>The Complete Native HTML Dominance Guide</title>
+  <title>Web Platform Fundamentals: Building with Native HTML</title>
   <style>
       :root {
           --color-bg: #ffffff;
@@ -651,89 +651,95 @@
 <body class="search_plugin_added">
 
 <div class="hero">
-  <h1>🚀 No more (JS) Drama</h1>
-  <p class="subtitle">Discover the power of semantic HTML and native browser features. This guide shows you how to build
-    accessible, performant interfaces using the web platform's built-in components with progressive enhancement.</p>
+  <h1>🚀 Web Platform Fundamentals</h1>
+  <p class="subtitle">Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how
+    leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable
+    codebases.</p>
 </div>
 
 <!-- COLLAPSIBLES -->
 <div class="section">
-  <h2 class="section-title">🎯 Collapsible Content</h2>
+  <h2 class="section-title">🎯 Progressive Disclosure Patterns</h2>
   <div class="comparison-grid">
     <div class="column bad">
-      <h3>Custom Implementation <span class="perf-indicator perf-slow">COMPLEX</span></h3>
+      <h3>JavaScript-Dependent Implementation <span class="perf-indicator perf-slow">COMPLEX</span></h3>
 
       <div class="accessibility-note">
-        <strong>⚠️ Accessibility:</strong> Requires manual ARIA, keyboard nav, and screen reader support.
+        <strong>⚠️ Implementation Overhead:</strong> Manual ARIA state management, keyboard event handling, focus
+        management, and screen reader compatibility.
       </div>
 
       <div class="js-wrapper">
         <div class="js-content" id="content1">
-          Web accessibility ensures that websites work for people with disabilities. Custom implementations need careful
-          attention to accessibility requirements.
+          Custom collapsible implementations require comprehensive event handling, state synchronization across
+          components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard
+          navigation patterns.
         </div>
         <button class="js-collapsible" onclick="toggleContent('content1')">
-          What is Web Accessibility?
+          Custom Collapsible Architecture
         </button>
       </div>
 
       <div class="js-wrapper">
         <div class="js-content" id="content2">
-          WCAG provides the framework for accessible web content. Following these guidelines ensures your content works
-          for assistive technologies.
+          Managing state across multiple collapsible sections introduces complexity in event coordination, memory
+          management, and performance optimization, particularly when dealing with dynamic content loading.
         </div>
         <button class="js-collapsible" onclick="toggleContent('content2')">
-          Why WCAG Guidelines Matter
+          State Management Challenges
         </button>
       </div>
 
       <div class="pros-cons">
-        <h4 class="cons">❌ Implementation Challenges:</h4>
+        <h4 class="cons">❌ Architecture Complexity:</h4>
         <ul>
-          <li>Manual ARIA attributes and keyboard navigation</li>
-          <li>JavaScript dependency affects reliability</li>
-          <li>State management and performance overhead</li>
+          <li>Event delegation and memory leak prevention</li>
+          <li>ARIA state synchronization and keyboard trap management</li>
+          <li>Cross-browser compatibility and polyfill requirements</li>
         </ul>
       </div>
     </div>
 
     <div class="column good">
-      <h3>Native HTML Elements <span class="perf-indicator perf-fast">BUILT-IN</span></h3>
+      <h3>Native Details/Summary Elements <span class="perf-indicator perf-fast">ZERO-JS</span></h3>
 
       <div class="accessibility-note">
-        <strong>🎯 Built-in:</strong> ARIA support, keyboard navigation, screen reader compatibility work automatically.
+        <strong>🎯 Platform Integration:</strong> Built-in ARIA semantics, keyboard navigation, screen reader support,
+        and browser-optimized animations.
       </div>
 
-      <details name="a11y">
-        <summary>What is Web Accessibility?</summary>
+      <details name="architecture">
+        <summary>Semantic HTML Architecture</summary>
         <div>
-          Web accessibility ensures that websites work for people with disabilities. Native HTML elements provide
-          accessibility features automatically, following established web standards.
+          The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies.
+          Browser engines handle state management, accessibility, and user interaction patterns according to platform
+          conventions.
         </div>
       </details>
 
-      <details name="a11y">
-        <summary>Why WCAG Guidelines Matter</summary>
-        <div>
-          WCAG provides the framework for accessible web content. Native elements follow these guidelines by default,
-          reducing development complexity.
-        </div>
-      </details>
-
-      <details name="a11y">
+      <details name="architecture">
         <summary>Progressive Enhancement Benefits</summary>
         <div>
-          Start with functional HTML, enhance with CSS, add JavaScript where needed. This ensures your content works
-          across all devices and abilities.
+          Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become
+          enhancement layers rather than functional requirements, improving reliability and reducing technical debt.
+        </div>
+      </details>
+
+      <details name="architecture">
+        <summary>Performance Characteristics</summary>
+        <div>
+          Native elements eliminate bundle size overhead, reduce runtime memory consumption, and leverage browser
+          optimizations unavailable to custom implementations. Hardware acceleration and efficient event handling come
+          built-in.
         </div>
       </details>
 
       <div class="pros-cons">
-        <h4 class="pros">✅ Built-in Advantages:</h4>
+        <h4 class="pros">✅ Platform Advantages:</h4>
         <ul>
-          <li>Semantic HTML5 with native ARIA and keyboard support</li>
-          <li>Works without JavaScript - progressive enhancement</li>
-          <li>Zero maintenance overhead, consistent UX</li>
+          <li>Zero JavaScript footprint with full accessibility compliance</li>
+          <li>Browser-native performance optimizations and hardware acceleration</li>
+          <li>Consistent cross-platform behavior with no maintenance overhead</li>
         </ul>
       </div>
     </div>
@@ -742,65 +748,68 @@
 
 <!-- MODALS -->
 <div class="section">
-  <h2 class="section-title">🪟 Modal Dialogs</h2>
+  <h2 class="section-title">🪟 Modal Dialog Patterns</h2>
   <div class="comparison-grid">
     <div class="column bad">
-      <h3>Custom Modal Implementation <span class="perf-indicator perf-slow">INVOLVED</span></h3>
+      <h3>Custom Modal Implementation <span class="perf-indicator perf-slow">BRITTLE</span></h3>
 
       <div class="accessibility-note">
-        <strong>⚠️ Requirements:</strong> Focus trapping, ESC handling, backdrop interaction, ARIA roles need custom
-        development.
+        <strong>⚠️ Critical Requirements:</strong> Focus trapping, inert background content, ESC key handling, backdrop
+        click management, and ARIA modal semantics.
       </div>
 
-      <button onclick="openJSModal()">Open Custom Modal</button>
+      <button onclick="openJSModal()">Launch Custom Modal</button>
 
       <div class="js-modal-overlay" id="jsModal">
         <div class="js-modal-content">
-          <h4>Custom Modal Implementation</h4>
-          <p>This modal requires custom JavaScript for focus management, keyboard handling, and ARIA attributes. While
-            flexible, it needs careful implementation.</p>
-          <p>All the text in the background can still be focused and the user does not get informed.</p>
+          <h4>Custom Modal Architecture</h4>
+          <p>This approach requires managing the modal stack, preventing background interaction, coordinating focus
+            management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.</p>
+          <p><strong>Critical Issue:</strong> Background content remains accessible to screen readers and keyboard
+            navigation without explicit inert management.</p>
           <button onclick="closeJSModal()">Close Modal</button>
         </div>
       </div>
 
       <div class="pros-cons">
-        <h4 class="cons">❌ Development Requirements:</h4>
+        <h4 class="cons">❌ Implementation Challenges:</h4>
         <ul>
-          <li>Focus trapping and ESC key handling</li>
-          <li>ARIA attributes and scroll management</li>
-          <li>Event cleanup and comprehensive testing</li>
+          <li>Focus trap implementation and restoration complexity</li>
+          <li>Modal stack management and z-index coordination</li>
+          <li>Event cleanup and memory leak prevention</li>
         </ul>
       </div>
     </div>
 
     <div class="column good">
-      <h3>Native Dialog Element <span class="perf-indicator perf-fast">READY</span></h3>
+      <h3>Native Dialog Element <span class="perf-indicator perf-fast">ROBUST</span></h3>
 
       <div class="accessibility-note">
-        <strong>🎯 Built-in:</strong> Focus trapping, ESC support, backdrop clicks, ARIA roles work out of the box.
+        <strong>🎯 Built-in Capabilities:</strong> Automatic focus trapping, inert background management, ESC key
+        support, and proper modal semantics.
       </div>
 
       <button onclick="document.getElementById('nativeDialog').showModal()">
-        Open Native Dialog
+        Launch Native Dialog
       </button>
 
       <dialog id="nativeDialog">
         <h4>Native Dialog Element</h4>
-        <p>This dialog provides built-in focus trapping, keyboard support, backdrop interaction, and ARIA semantics
-          automatically.</p>
-        <p><strong>The browser handles the complexity for you.</strong></p>
+        <p>The HTML5 dialog element provides robust modal functionality with automatic focus management, backdrop
+          interaction handling, and proper accessibility semantics built into the browser engine.</p>
+        <p><strong>Key Advantage:</strong> Background content becomes automatically inert, preventing interaction and
+          screen reader access without additional implementation.</p>
         <button onclick="document.getElementById('nativeDialog').close()">
           Close Dialog
         </button>
       </dialog>
 
       <div class="pros-cons">
-        <h4 class="pros">✅ Native Features:</h4>
+        <h4 class="pros">✅ Engine-Level Features:</h4>
         <ul>
-          <li>Built-in focus trapping and ESC key support</li>
-          <li>Backdrop clicks and scroll management</li>
-          <li>No memory leaks, consistent browser behavior</li>
+          <li>Automatic focus trapping with proper restoration</li>
+          <li>Built-in ESC key handling and backdrop click support</li>
+          <li>Modal semantics and inert background management</li>
         </ul>
       </div>
     </div>
@@ -809,76 +818,78 @@
 
 <!-- FORM VALIDATION -->
 <div class="section">
-  <h2 class="section-title">📝 Form Validation</h2>
+  <h2 class="section-title">📝 Constraint Validation Patterns</h2>
   <div class="comparison-grid">
     <div class="column bad">
-      <h3>Custom Validation Logic <span class="perf-indicator perf-slow">MANUAL</span></h3>
+      <h3>Custom Validation Logic <span class="perf-indicator perf-slow">FRAGILE</span></h3>
 
       <div class="accessibility-note">
-        <strong>⚠️ Implementation:</strong> Custom error announcements, validation timing, focus management needed.
+        <strong>⚠️ Validation Complexity:</strong> Custom error messaging, timing coordination, accessibility
+        announcements, and server-client synchronization.
       </div>
 
       <form onsubmit="return validateJSForm(event)">
         <div class="form-group">
-          <label for="js-email">Email Address</label>
+          <label for="js-email">Email Validation</label>
           <input id="js-email" name="email" type="text">
-          <div class="js-error" id="email-error">Please enter a valid email</div>
+          <div class="js-error" id="email-error">Invalid email format detected</div>
         </div>
 
         <div class="form-group">
-          <label for="js-iban">IBAN</label>
-          <input id="js-iban" name="iban" type="text">
-          <div class="js-error" id="iban-error">Please enter a valid IBAN</div>
+          <label for="js-regex">Pattern Matching (UUID)</label>
+          <input id="js-regex" name="uuid" type="text">
+          <div class="js-error" id="regex-error">UUID format required: 8-4-4-4-12 hex digits</div>
         </div>
 
-        <button type="submit">Submit Form</button>
+        <button type="submit">Validate Form</button>
       </form>
 
       <div class="pros-cons">
-        <h4 class="cons">❌ Custom Validation Challenges:</h4>
+        <h4 class="cons">❌ Validation Brittleness:</h4>
         <ul>
-          <li>Custom patterns may miss edge cases</li>
-          <li>Error message and timing management</li>
-          <li>Client-server validation synchronization</li>
+          <li>Regex patterns miss edge cases and internationalization</li>
+          <li>Error timing and accessibility announcement coordination</li>
+          <li>Client-server validation drift and synchronization issues</li>
         </ul>
       </div>
     </div>
 
     <div class="column good">
-      <h3>Native HTML5 Validation <span class="perf-indicator perf-fast">INTEGRATED</span></h3>
+      <h3>Constraint Validation API <span class="perf-indicator perf-fast">SPEC-COMPLIANT</span></h3>
 
       <div class="accessibility-note">
-        <strong>🎯 Built-in:</strong> Automatic error announcements, ARIA attributes, consistent validation timing.
+        <strong>🎯 Standards-Based:</strong> Automatic error announcements, internationalized messages, and CSS
+        pseudo-class integration.
       </div>
 
       <form>
         <div class="form-group">
-          <label for="native-email-wcag">Email Address</label>
-          <input id="native-email-wcag" name="email" placeholder="user@example.com" required="" type="email">
+          <label for="native-email">Email Validation</label>
+          <input id="native-email" name="email" placeholder="developer@example.org" required type="email">
         </div>
 
         <div class="form-group">
-          <label for="native-iban">IBAN</label>
-          <input id="native-iban" name="iban"
-                 pattern="[A-Z]{2}[0-9]{2}[A-Z0-9]{4}[0-9]{7}([A-Z0-9]?){0,16}"
-                 placeholder="DE89370400440532013000" required=""
-                 title="Enter a valid IBAN format (e.g., DE89370400440532013000)" type="text">
+          <label for="native-uuid">UUID Pattern</label>
+          <input id="native-uuid" name="uuid"
+                 pattern="[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}"
+                 placeholder="550e8400-e29b-41d4-a716-446655440000" required
+                 title="Enter a valid UUID format (e.g., 550e8400-e29b-41d4-a716-446655440000)" type="text">
         </div>
 
         <div class="form-group">
-          <label for="native-url">Website URL</label>
-          <input id="native-url" name="website" placeholder="https://example.com" type="url">
+          <label for="native-api">API Endpoint URL</label>
+          <input id="native-api" name="api" placeholder="https://api.example.org/v1" type="url">
         </div>
 
         <button type="submit">Submit Form</button>
       </form>
 
       <div class="pros-cons">
-        <h4 class="pros">✅ Native Validation Features:</h4>
+        <h4 class="pros">✅ Specification Compliance:</h4>
         <ul>
-          <li>Built-in validation for email, URL, patterns</li>
-          <li>Automatic error messages in user's language</li>
-          <li>CSS pseudo-classes and Constraint Validation API</li>
+          <li>RFC-compliant validation patterns with internationalization</li>
+          <li>Automatic error messaging in user's preferred language</li>
+          <li>CSS pseudo-classes (:valid, :invalid) for styling integration</li>
         </ul>
       </div>
     </div>
@@ -887,29 +898,29 @@
 
 <!-- PROGRESS INDICATORS -->
 <div class="section">
-  <h2 class="section-title">📊 Progress Indicators</h2>
+  <h2 class="section-title">📊 Progress Indication Patterns</h2>
   <div class="comparison-grid">
     <div class="column bad">
-      <h3>Custom Progress Implementation <span class="perf-indicator perf-slow">STYLED</span></h3>
+      <h3>Custom Progress Implementation <span class="perf-indicator perf-slow">SEMANTIC-VOID</span></h3>
 
       <div class="accessibility-note">
-        <strong>⚠️ Requirements:</strong> Semantic meaning, screen reader announcements, ARIA labels need custom
-        implementation.
+        <strong>⚠️ Accessibility Gap:</strong> No semantic meaning without explicit ARIA implementation and screen
+        reader progress announcements.
       </div>
 
       <div class="js-progress-container">
         <div class="js-progress-bar" id="jsProgress"></div>
       </div>
 
-      <p>Custom Progress: <span id="jsProgressText">0%</span></p>
-      <button onclick="startJSProgress()">Start Progress Demo</button>
+      <p>Build Progress: <span id="jsProgressText">0%</span></p>
+      <button onclick="startJSProgress()">Start Build Process</button>
 
       <div class="pros-cons">
-        <h4 class="cons">❌ Custom Implementation Needs:</h4>
+        <h4 class="cons">❌ Semantic Limitations:</h4>
         <ul>
-          <li>No semantic meaning without ARIA attributes</li>
-          <li>Screen reader announcements require setup</li>
-          <li>Animation performance and value calculations</li>
+          <li>No inherent semantic meaning for assistive technologies</li>
+          <li>Manual ARIA live region management for progress updates</li>
+          <li>Custom animation performance and value interpolation</li>
         </ul>
       </div>
     </div>
@@ -918,95 +929,97 @@
       <h3>Native Progress Element <span class="perf-indicator perf-fast">SEMANTIC</span></h3>
 
       <div class="accessibility-note">
-        <strong>🎯 Built-in:</strong> Semantic element, native ARIA support, automatic screen reader announcements.
+        <strong>🎯 Semantic Integration:</strong> Built-in progress role, automatic ARIA value announcements, and
+        indeterminate state support.
       </div>
 
-      <p>Static Progress Example</p>
-      <progress max="100" value="70">70%</progress>
+      <p>Compilation Progress</p>
+      <progress max="100" value="75">75% complete</progress>
 
-      <p>Indeterminate Progress (no value attribute)</p>
-      <progress>Loading...</progress>
+      <p>Indeterminate Operation (processing)</p>
+      <progress>Processing dependencies...</progress>
 
-      <p>Native Progress: <span id="nativeProgressText">0%</span></p>
+      <p>Dynamic Progress: <span id="nativeProgressText">0%</span></p>
       <progress id="nativeProgress" max="100" value="0">0%</progress>
-      <button onclick="startNativeProgress()">Start Progress Demo</button>
+      <button onclick="startNativeProgress()">Start Process</button>
 
       <div class="pros-cons">
-        <h4 class="pros">✅ Native Progress Benefits:</h4>
+        <h4 class="pros">✅ Semantic Advantages:</h4>
         <ul>
-          <li>Semantic element with built-in ARIA support</li>
-          <li>Automatic progress announcements</li>
-          <li>Indeterminate state and hardware-accelerated animations</li>
+          <li>Built-in progress role with automatic value announcements</li>
+          <li>Indeterminate state support for unknown duration operations</li>
+          <li>Platform-optimized rendering and animation performance</li>
         </ul>
       </div>
     </div>
   </div>
 </div>
 
-<!-- DATE PICKERS -->
+<!-- DATE/TIME INPUTS -->
 <div class="section">
-  <h2 class="section-title">📅 Date Pickers</h2>
+  <h2 class="section-title">📅 Temporal Input Patterns</h2>
   <div class="comparison-grid">
     <div class="column bad">
-      <h3>Custom Date Picker <span class="perf-indicator perf-slow">LIBRARY</span></h3>
+      <h3>Custom Date Picker <span class="perf-indicator perf-slow">HEAVYWEIGHT</span></h3>
 
       <div class="accessibility-note">
-        <strong>⚠️ Complexity:</strong> Keyboard navigation, screen reader support, date parsing, mobile UX need
-        development.
+        <strong>⚠️ Implementation Scope:</strong> Calendar widget architecture, keyboard navigation,
+        internationalization, timezone handling, and mobile touch optimization.
       </div>
 
       <div class="form-group">
-        <label for="js-date">Select Date (Custom)</label>
-        <input id="js-date" onclick="openDatePicker()" placeholder="DD.MM.YYYY" readonly="" type="text">
+        <label for="js-date">Deployment Date (Custom)</label>
+        <input id="js-date" onclick="openDatePicker()" placeholder="YYYY-MM-DD" readonly type="text">
         <div id="datePicker"
              style="display:none; position:absolute; background:white; border:1px solid #ccc; z-index:1000;">
           <p style="padding:20px; color:#666;">
-            [Complex calendar widget would be here]<br>
-            Requires: JavaScript library, keyboard handlers,<br>
-            ARIA implementation, mobile touch events.
+            [Calendar widget implementation]<br>
+            Requires: Date manipulation library, internationalization,<br>
+            keyboard navigation, mobile gesture handling,<br>
+            timezone calculations, accessibility compliance.
           </p>
         </div>
       </div>
 
       <div class="pros-cons">
-        <h4 class="cons">❌ Custom Date Picker Challenges:</h4>
+        <h4 class="cons">❌ Implementation Overhead:</h4>
         <ul>
-          <li>Large JavaScript libraries and complex keyboard navigation</li>
-          <li>Mobile UX differs from native experience</li>
-          <li>Date format parsing, timezone, and localization complexity</li>
+          <li>Large JavaScript libraries and complex calendar logic</li>
+          <li>Mobile UX inconsistency with platform date pickers</li>
+          <li>Internationalization complexity and timezone edge cases</li>
         </ul>
       </div>
     </div>
 
     <div class="column good">
-      <h3>Native Date Inputs <span class="perf-indicator perf-fast">PLATFORM</span></h3>
+      <h3>Native Temporal Inputs <span class="perf-indicator perf-fast">PLATFORM-NATIVE</span></h3>
 
       <div class="accessibility-note">
-        <strong>🎯 Platform:</strong> Native keyboard navigation, screen reader support, platform-consistent UX,
-        automatic validation.
+        <strong>🎯 OS Integration:</strong> Platform-consistent UI, automatic keyboard navigation, built-in validation,
+        and internationalization support.
       </div>
 
       <div class="form-group">
-        <label for="native-date">Date</label>
-        <input id="native-date" max="2030-12-31" min="2020-01-01" name="date" type="date" value="2024-06-15">
+        <label for="native-date">Release Date</label>
+        <input id="native-date" max="2025-12-31" min="2024-01-01" name="date" type="date" value="2024-12-15">
       </div>
 
       <div class="form-group">
-        <label for="native-datetime">Date and Time</label>
-        <input id="native-datetime" max="2024-12-31T23:59" min="2024-01-01T00:00" name="datetime" type="datetime-local">
+        <label for="native-datetime">Build Timestamp</label>
+        <input id="native-datetime" name="datetime" step="1" type="datetime-local">
       </div>
 
       <div class="form-group">
-        <label for="native-time">Time</label>
-        <input id="native-time" max="17:00" min="09:00" name="time" step="900" type="time">
+        <label for="native-time">Deployment Window</label>
+        <input id="native-time" max="18:00" min="02:00" name="time" step="900" type="time">
       </div>
 
       <div class="pros-cons">
-        <h4 class="pros">✅ Native Date Input Benefits:</h4>
+        <h4 class="pros">✅ Platform Integration:</h4>
         <ul>
-          <li>No JavaScript required - native OS picker on mobile</li>
-          <li>Automatic keyboard navigation and date validation</li>
-          <li>Consistent UX and automatic localization</li>
+          <li>Zero-bundle impact with native OS picker integration</li>
+          <li>Automatic validation and internationalization support</li>
+          <li>Consistent UX aligned with platform conventions</li>
         </ul>
       </div>
     </div>
@@ -1015,214 +1028,97 @@
 
 <!-- SEARCH & AUTOCOMPLETE -->
 <div class="section">
-  <h2 class="section-title">🔍 Search &amp; Autocomplete</h2>
+  <h2 class="section-title">🔍 Autocomplete Patterns</h2>
   <div class="comparison-grid">
     <div class="column bad">
-      <h3>Custom Autocomplete <span class="perf-indicator perf-slow">FEATURED</span></h3>
+      <h3>Custom Autocomplete <span class="perf-indicator perf-slow">INTERACTION-HEAVY</span></h3>
 
       <div class="accessibility-note">
-        <strong>⚠️ Requirements:</strong> Dropdown management, keyboard navigation, screen reader support, focus
-        management.
+        <strong>⚠️ Interaction Complexity:</strong> Dropdown positioning, keyboard navigation, ARIA combobox
+        implementation, and mobile touch handling.
       </div>
 
       <div class="form-group">
-        <label for="js-search">City Search (Custom)</label>
-        <input autocomplete="off" id="js-search" onkeyup="filterCities(this.value)"
-               placeholder="Type to search cities..." type="text">
+        <label for="js-search">Framework Search (Custom)</label>
+        <input autocomplete="off" id="js-search" onkeyup="filterFrameworks(this.value)"
+               placeholder="Type framework name..." type="text">
         <div id="js-results"
-             style="display:none; position:absolute; background:var(--color-card); border:1px solid var(--color-border); max-height:200px; overflow-y:auto; z-index:100;">
-        </div>
+             style="display:none; position:absolute; background:var(--color-card); border:1px solid var(--color-border); max-height:200px; overflow-y:auto; z-index:100;"></div>
       </div>
 
       <div class="pros-cons">
-        <h4 class="cons">❌ Custom Autocomplete Requirements:</h4>
+        <h4 class="cons">❌ Interaction Management:</h4>
         <ul>
-          <li>Complex keyboard navigation and ARIA management</li>
-          <li>Focus management and dropdown positioning</li>
-          <li>Mobile touch behavior and performance considerations</li>
+          <li>Complex ARIA combobox implementation and state management</li>
+          <li>Dropdown positioning and viewport collision detection</li>
+          <li>Mobile keyboard optimization and touch event handling</li>
         </ul>
       </div>
     </div>
 
     <div class="column good">
-      <h3>Native Datalist Element <span class="perf-indicator perf-fast">BUILT-IN</span></h3>
+      <h3>Native Datalist Element <span class="perf-indicator perf-fast">ZERO-CONFIG</span></h3>
 
       <div class="accessibility-note">
-        <strong>🎯 Native:</strong> Built-in keyboard navigation, screen reader support, native OS integration.
+        <strong>🎯 Native Combobox:</strong> Built-in ARIA combobox semantics, keyboard navigation, and
+        platform-consistent interaction patterns.
       </div>
 
       <div class="form-group">
-        <label for="native-city">City Search (Native)</label>
-        <input id="native-city" list="cities" placeholder="Type or select a city..." type="text">
-        <datalist id="cities">
-          <!-- Original core cities with proper names -->
-          <option value="Berlin">
-          <option value="Wien">
-          <option value="Zürich">
-          <option value="München">
-          <option value="Hamburg">
-          <option value="Salzburg">
-          <option value="Genève">
-          <option value="Frankfurt am Main">
-          <option value="Köln">
-          <option value="Stuttgart">
-
-            <!-- Extended German cities -->
-          <option value="Dresden">
-          <option value="Leipzig">
-          <option value="Düsseldorf">
-          <option value="Dortmund">
-          <option value="Essen">
-          <option value="Bremen">
-          <option value="Hannover">
-          <option value="Nürnberg">
-          <option value="Duisburg">
-          <option value="Bochum">
-          <option value="Wuppertal">
-          <option value="Bielefeld">
-          <option value="Bonn">
-          <option value="Münster">
-          <option value="Karlsruhe">
-          <option value="Mannheim">
-          <option value="Augsburg">
-          <option value="Wiesbaden">
-          <option value="Gelsenkirchen">
-          <option value="Mönchengladbach">
-          <option value="Braunschweig">
-          <option value="Chemnitz">
-          <option value="Kiel">
-          <option value="Aachen">
-          <option value="Halle (Saale)">
-          <option value="Magdeburg">
-          <option value="Freiburg im Breisgau">
-          <option value="Krefeld">
-          <option value="Lübeck">
-          <option value="Oberhausen">
-
-            <!-- Austrian cities -->
-          <option value="Graz">
-          <option value="Linz">
-          <option value="Innsbruck">
-          <option value="Klagenfurt">
-          <option value="Villach">
-          <option value="Wels">
-          <option value="Sankt Pölten">
-          <option value="Dornbirn">
-          <option value="Steyr">
-          <option value="Wiener Neustadt">
-
-            <!-- Swiss cities -->
-          <option value="Basel">
-          <option value="Bern">
-          <option value="Lausanne">
-          <option value="Winterthur">
-          <option value="Luzern">
-          <option value="St. Gallen">
-          <option value="Lugano">
-          <option value="Biel/Bienne">
-          <option value="Thun">
-          <option value="Köniz">
-
-            <!-- South Tyrolean cities -->
-          <option value="Bozen">
-          <option value="Meran">
-          <option value="Brixen">
-          <option value="Bruneck">
-          <option value="Sterzing">
-          <option value="Schlanders">
-          <option value="Eppan">
-          <option value="Leifers">
-          <option value="Klausen">
-          <option value="Neumarkt">
-
-            <!-- Alsatian cities -->
-          <option value="Strasbourg">
-          <option value="Mulhouse">
-          <option value="Colmar">
-          <option value="Haguenau">
-          <option value="Schiltigheim">
-          <option value="Illkirch-Graffenstaden">
-          <option value="Saint-Louis">
-          <option value="Sélestat">
-          <option value="Bischwiller">
-          <option value="Saverne">
+        <label for="native-framework">JavaScript Framework</label>
+        <input id="native-framework" list="frameworks" placeholder="Select or type framework..." type="text">
+        <datalist id="frameworks">
+          <option value="React">React - Component-based library</option>
+          <option value="Vue.js">Vue.js - Progressive framework</option>
+          <option value="Angular">Angular - Full platform</option>
+          <option value="Svelte">Svelte - Compile-time framework</option>
+          <option value="Solid">Solid - Fine-grained reactivity</option>
+          <option value="Alpine.js">Alpine.js - Minimal framework</option>
+          <option value="Lit">Lit - Web Components library</option>
+          <option value="Preact">Preact - Lightweight React alternative</option>
         </datalist>
       </div>
 
       <div class="form-group">
-        <label for="native-browser">Browser Choice</label>
-        <input id="native-browser" list="browsers" placeholder="Choose your browser..." type="text">
-        <datalist id="browsers">
-          <option label="Google Chrome" value="Chrome">
-          </option>
-          <option label="Mozilla Firefox" value="Firefox">
-          </option>
-          <option label="Apple Safari" value="Safari">
-          </option>
-          <option label="Microsoft Edge" value="Edge">
-          </option>
-          <option label="Opera Browser" value="Opera">
-          </option>
-        </datalist>
-      </div>
+        <label for="native-language">Programming Language</label>
+        <input id="native-language" list="languages" placeholder="Choose language..." type="text">
+        <datalist id="languages">
+          <option label="JavaScript - Dynamic scripting" value="JavaScript"></option>
+          <option label="TypeScript - Typed JavaScript" value="TypeScript"></option>
+          <option label="Python - General purpose" value="Python"></option>
+          <option label="Rust - Systems programming" value="Rust"></option>
+          <option label="Go - Concurrent systems" value="Go"></option>
+          <option label="WebAssembly - High-performance web" value="WebAssembly"></option>
 
-      <div class="form-group">
-        <label for="company-domain">Company Domain</label>
-        <input
-            aria-describedby="company-domain-hint"
-            autocomplete="organization"
-            id="company-domain"
-            list="company-domains"
-            placeholder="e.g., siemens, volkswagen"
-            type="text"
-        >
-        <small class="form-text text-muted" id="company-domain-hint">
-          Enter your company's domain name without www or .com
-        </small>
+          <option label="C - Low-level systems" value="C"></option>
+          <option label="C++ - High-performance systems" value="C++"></option>
+          <option label="C# - .NET ecosystem" value="C#"></option>
+          <option label="Java - Cross-platform enterprise" value="Java"></option>
+          <option label="Kotlin - Modern JVM language" value="Kotlin"></option>
+          <option label="Swift - iOS and macOS" value="Swift"></option>
 
-        <datalist id="company-domains">
-          <!-- German automotive & industrial giants -->
-          <option label="Volkswagen AG" value="volkswagen">
-          <option label="Mercedes-Benz Group" value="mercedes-benz">
-          <option label="BMW Group" value="bmw">
-          <option label="Audi AG" value="audi">
-          <option label="Porsche AG" value="porsche">
+          <option label="Ruby - Web development (Rails)" value="Ruby"></option>
+          <option label="PHP - Server-side scripting" value="PHP"></option>
+          <option label="Perl - Text processing" value="Perl"></option>
+          <option label="Haskell - Functional programming" value="Haskell"></option>
+          <option label="Elixir - Scalable applications" value="Elixir"></option>
+          <option label="Dart - Web and mobile apps" value="Dart"></option>
 
-            <!-- Industrial conglomerates -->
-          <option label="Siemens AG" value="siemens">
-          <option label="Robert Bosch GmbH" value="bosch">
-          <option label="thyssenkrupp AG" value="thyssenkrupp">
-          <option label="Continental AG" value="continental">
-          <option label="Schaeffler Group" value="schaeffler">
-
-            <!-- Tech & Software -->
-          <option label="SAP SE" value="sap">
-          <option label="Infineon Technologies" value="infineon">
-          <option label="Software AG" value="software-ag">
-
-            <!-- Energy & Utilities -->
-          <option label="E.ON SE" value="eon">
-          <option label="RWE AG" value="rwe">
-          <option label="Wintershall Dea" value="wintershall-dea">
-
-            <!-- Chemicals & Pharma -->
-          <option label="BASF SE" value="basf">
-          <option label="Bayer AG" value="bayer">
-          <option label="Merck KGaA" value="merck">
-
-            <!-- Retail & Consumer -->
-          <option label="Adidas AG" value="adidas">
-          <option label="Puma SE" value="puma">
-          <option label="Metro AG" value="metro">
+          <option label="Scala - Functional JVM language" value="Scala"></option>
+          <option label="Lua - Lightweight scripting" value="Lua"></option>
+          <option label="R - Statistical computing" value="R"></option>
+          <option label="Julia - High-performance computing" value="Julia"></option>
+          <option label="Shell - Command-line scripting" value="Shell"></option>
+          <option label="MATLAB - Engineering and science" value="MATLAB"></option>
         </datalist>
       </div>
 
       <div class="pros-cons">
-        <h4 class="pros">✅ Native Datalist Features:</h4>
+        <h4 class="pros">✅ Zero-Configuration Benefits:</h4>
         <ul>
-          <li>Zero JavaScript - built-in keyboard navigation</li>
-          <li>Screen reader compatible with native OS integration</li>
-          <li>Form validation compatibility and graceful degradation</li>
+          <li>Native combobox semantics with automatic ARIA support</li>
+          <li>Platform-consistent keyboard and interaction patterns</li>
+          <li>Form validation integration and graceful degradation</li>
         </ul>
       </div>
     </div>
@@ -1230,32 +1126,52 @@
 </div>
 
 <div class="summary-box">
-  <h3>Embrace Built-in Web Components</h3>
-  <p>Native HTML elements provide rich functionality with built-in accessibility, keyboard navigation, and consistent
-    user experience. These elements represent years of browser engineering and web standards development.</p>
+  <h3>Platform-First Development</h3>
+  <p>Native HTML elements represent years of browser engineering, accessibility research, and web standards evolution.
+    They provide robust functionality with minimal implementation overhead and maximum compatibility.</p>
 
-  <p><strong>The approach:</strong></p>
+  <p><strong>The Progressive Enhancement Approach:</strong></p>
   <ul style="text-align: left; max-width: 600px; margin: 2rem auto;">
-    <li>Start with semantic HTML that works for everyone</li>
-    <li>Enhance with CSS for visual design</li>
-    <li>Add JavaScript progressively where truly needed</li>
+    <li>Build with semantic HTML that functions universally</li>
+    <li>Enhance visual design through CSS without breaking functionality</li>
+    <li>Layer JavaScript for complex interactions where native capabilities are insufficient</li>
   </ul>
 
-  <p>Build with the platform, not against it. <strong>Your users will thank you.</strong></p>
+  <p>Leverage browser engines rather than reimplementing their functionality. <strong>Your codebase will be more
+    maintainable, your users will have better experiences.</strong></p>
 
   <div class="zen-quote">
-    "The most elegant code leverages existing solutions. Native HTML elements provide decades of accessibility research
-    and browser optimization - use them as your foundation."
+    "The most sophisticated architecture is often the one that uses existing, well-tested components. Native HTML
+    elements provide decades of optimization and accessibility engineering—build upon this foundation rather than around
+    it."
   </div>
 </div>
 
 <script>
-  // Existing JavaScript functions with additions for progress demo
+  // JavaScript functions remain unchanged except for filterFrameworks addition
+  const frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];
+
+  function filterFrameworks(value) {
+    const results = document.getElementById('js-results');
+    if (!value) {
+      results.style.display = 'none';
+      return;
+    }
+    const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));
+    results.innerHTML = filtered.map(fw => `<div style="padding:8px; cursor:pointer;" onclick="selectFramework('${fw}')">${fw}</div>`).join('');
+    results.style.display = filtered.length ? 'block' : 'none';
+  }
+
+  function selectFramework(fw) {
+    document.getElementById('js-search').value = fw;
+    document.getElementById('js-results').style.display = 'none';
+  }
+
+  // All other functions remain unchanged
   function startNativeProgress() {
     const progress = document.getElementById('nativeProgress');
     const text = document.getElementById('nativeProgressText');
     let value = 0;
-
     const interval = setInterval(() => {
       value += Math.random() * 15;
       if (value >= 100) {
@@ -1267,10 +1183,8 @@
     }, 200);
   }
 
-  // Rest of existing JavaScript functions remain unchanged
   function toggleContent(id) {
-    const content = document.getElementById(id);
-    content.classList.toggle("active");
+    document.getElementById(id).classList.toggle("active");
   }
 
   function openJSModal() {
@@ -1291,7 +1205,6 @@
     const bar = document.getElementById('jsProgress');
     const text = document.getElementById('jsProgressText');
     let width = 0;
-
     const interval = setInterval(() => {
       width += Math.random() * 15;
       if (width >= 100) {
@@ -1307,51 +1220,6 @@
     const picker = document.getElementById('datePicker');
     picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
   }
-
-  const cities = [
-    // Original core cities with proper names
-    'Berlin', 'Wien', 'Zürich', 'München', 'Hamburg', 'Salzburg', 'Genève', 'Frankfurt am Main', 'Köln', 'Stuttgart',
-
-    // Extended German cities
-    'Dresden', 'Leipzig', 'Düsseldorf', 'Dortmund', 'Essen', 'Bremen', 'Hannover', 'Nürnberg', 'Duisburg', 'Bochum',
-    'Wuppertal', 'Bielefeld', 'Bonn', 'Münster', 'Karlsruhe', 'Mannheim', 'Augsburg', 'Wiesbaden', 'Gelsenkirchen', 'Mönchengladbach',
-    'Braunschweig', 'Chemnitz', 'Kiel', 'Aachen', 'Halle (Saale)', 'Magdeburg', 'Freiburg im Breisgau', 'Krefeld', 'Lübeck', 'Oberhausen',
-
-    // Austrian cities beyond Wien/Salzburg
-    'Graz', 'Linz', 'Innsbruck', 'Klagenfurt', 'Villach', 'Wels', 'Sankt Pölten', 'Dornbirn', 'Steyr', 'Wiener Neustadt',
-
-    // Swiss cities beyond Zürich/Genève
-    'Basel', 'Bern', 'Lausanne', 'Winterthur', 'Luzern', 'St. Gallen', 'Lugano', 'Biel/Bienne', 'Thun', 'Köniz',
-
-    // South Tyrolean cities (Italian with German names)
-    'Bozen', 'Meran', 'Brixen', 'Bruneck', 'Sterzing', 'Schlanders', 'Eppan', 'Leifers', 'Klausen', 'Neumarkt',
-
-    // Alsatian cities (historically German-speaking)
-    'Strasbourg', 'Mulhouse', 'Colmar', 'Haguenau', 'Schiltigheim', 'Illkirch-Graffenstaden', 'Saint-Louis', 'Sélestat', 'Bischwiller', 'Saverne'
-  ];
-
-  function filterCities(value) {
-    const results = document.getElementById('js-results');
-    if (!value) {
-      results.style.display = 'none';
-      return;
-    }
-
-    const filtered = cities.filter(city =>
-      city.toLowerCase().includes(value.toLowerCase())
-    );
-
-    results.innerHTML = filtered.map(city =>
-      `<div style="padding:8px; cursor:pointer;" onclick="selectCity('${city}')">${city}</div>`
-    ).join('');
-
-    results.style.display = filtered.length ? 'block' : 'none';
-  }
-
-  function selectCity(city) {
-    document.getElementById('js-search').value = city;
-    document.getElementById('js-results').style.display = 'none';
-  }
 </script>
 
 </body>
