v1.3.4: Add missing visual previews and code examples in docs

dobexx · claude · dobexx · commit 0afa8d4130dc · 2026-03-29T21:11:58.000+02:00
- Tab-Bar: visual preview added (EN + DE)
- Toast: visual preview added (EN + DE)
- Status Notice: HTML code example added (EN + DE)
- Version bumped to 1.3.4 across all files

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -18,6 +18,9 @@ desktop.ini
 *.swp
 *.swo
 
+# Playwright
+.playwright-cli/
+
 # Logs
 *.log
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,20 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.3.4] – 2026-03-29
+
+### Added
+
+- **Visual preview for Tab-Bar** in `docs.html` and `de/docs.html` – live rendered tab bar with 4 tabs (Home, Documents with badge, Upload, Settings)
+- **Visual preview for Toast** in `docs.html` and `de/docs.html` – static success toast rendered inline
+- **HTML code example for Status Notice** in `docs.html` and `de/docs.html` – was previously preview-only without code snippet
+
+### Changed
+
+- Version references updated to 1.3.4 across all files
+
+---
+
 ## [1.3.3] – 2026-03-21
 
 ### Added
@@ -193,8 +207,9 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.3.4]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.4
 [1.3.3]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.3
 [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
 [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
 [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.3...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.4...HEAD
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.3.3-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.3.4-orange?style=flat-square" alt="Version">
   <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
   <img src="https://img.shields.io/badge/components-22-green?style=flat-square" alt="Components">
   <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.3-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.4-f5a623?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit?style=flat-square&color=cb3837&label=npm" alt="npm"></a>
   <a href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/"><img src="https://img.shields.io/badge/CDN-jsDelivr-blue?style=flat-square" alt="jsDelivr"></a>
 </p>
diff --git a/de/docs.html b/de/docs.html
@@ -373,7 +373,7 @@
 <aside class="docs-sidebar">
   <div class="docs-sidebar__title">🧊 GlassKit</div>
   <div class="docs-sidebar__subtitle">Glassmorphismus pur.</div>
-  <div class="docs-sidebar__version">v1.3.3 &ndash; Jungherz GmbH</div>
+  <div class="docs-sidebar__version">v1.3.4 &ndash; Jungherz GmbH</div>
 
   <div class="docs-sidebar__group">
     <div class="docs-sidebar__group-title">Grundlagen</div>
@@ -436,7 +436,7 @@
     <h1>Glassmorphism UI Library</h1>
     <p>Vollständige CSS-Komponentenbibliothek im Glasmorphism-Stil – entwickelt von der Jungherz GmbH. Reines CSS, keine Abhängigkeiten, Dark & Light Mode.</p>
     <div class="docs-hero__meta">
-      <span class="docs-hero__badge">v1.3.3</span>
+      <span class="docs-hero__badge">v1.3.4</span>
       <span class="docs-hero__badge">CSS only</span>
       <span class="docs-hero__badge">Dark + Light</span>
       <span class="docs-hero__badge">22 Komponenten</span>
@@ -581,6 +581,35 @@ <h2>Pill-Buttons</h2>
   <section class="docs-section" id="tab-bar">
     <h2>Tab-Bar</h2>
     <p>Fixierte Bottom-Navigation mit Glas-Hintergrund und optionalem Badge.</p>
+    <div class="docs-preview" style="position:relative;height:82px;overflow:hidden;">
+      <nav class="glass-tab-bar" style="position:absolute;bottom:0;left:0;right:0;">
+        <button class="glass-tab-bar__item is-active">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+          </span>
+          <span class="glass-tab-bar__label">Start</span>
+        </button>
+        <button class="glass-tab-bar__item">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+            <span class="glass-tab-bar__badge">3</span>
+          </span>
+          <span class="glass-tab-bar__label">Dokumente</span>
+        </button>
+        <button class="glass-tab-bar__item">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><path d="M12 16V4"/><polyline points="8 8 12 4 16 8"/><path d="M20 17v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1"/></svg>
+          </span>
+          <span class="glass-tab-bar__label">Hochladen</span>
+        </button>
+        <button class="glass-tab-bar__item">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+          </span>
+          <span class="glass-tab-bar__label">Einstellungen</span>
+        </button>
+      </nav>
+    </div>
     <div class="docs-code-wrapper">
       <div class="docs-code"><span class="tag">&lt;nav</span> <span class="attr">class=</span><span class="val">"glass-tab-bar"</span><span class="tag">&gt;</span>
   <span class="tag">&lt;button</span> <span class="attr">class=</span><span class="val">"glass-tab-bar__item is-active"</span><span class="tag">&gt;</span>
@@ -704,6 +733,12 @@ <h2>Status-Hinweis</h2>
         <p>Noch keine Verträge vorhanden.</p>
       </div>
     </div>
+    <div class="docs-code-wrapper">
+      <div class="docs-code"><span class="tag">&lt;div</span> <span class="attr">class=</span><span class="val">"glass-status"</span><span class="tag">&gt;</span>
+  <span class="tag">&lt;svg</span> <span class="attr">viewBox=</span><span class="val">"0 0 24 24"</span><span class="tag">&gt;</span><span class="cmt">&lt;!-- Icon --&gt;</span><span class="tag">&lt;/svg&gt;</span>
+  <span class="tag">&lt;p&gt;</span>Noch keine Verträge vorhanden.<span class="tag">&lt;/p&gt;</span>
+<span class="tag">&lt;/div&gt;</span></div>
+    </div>
   </section>
 
   <!-- MODAL -->
@@ -729,6 +764,12 @@ <h2>Modal</h2>
   <section class="docs-section" id="toast">
     <h2>Toast</h2>
     <p>Sichtbar via <code>.is-visible</code>. Varianten: <code>--success</code>, <code>--error</code>, <code>--warning</code>.</p>
+    <div class="docs-preview docs-preview--constrained" style="position:relative;min-height:60px;">
+      <div class="glass-toast glass-toast--success" style="position:relative;top:auto;left:auto;transform:none;opacity:1;pointer-events:auto;">
+        <svg class="glass-toast__icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="8 12 11 15 16 9"/></svg>
+        <span class="glass-toast__text">Dokument erfolgreich hochgeladen!</span>
+      </div>
+    </div>
     <div class="docs-code-wrapper">
       <div class="docs-code"><span class="tag">&lt;div</span> <span class="attr">class=</span><span class="val">"glass-toast glass-toast--success"</span><span class="tag">&gt;</span>
   <span class="tag">&lt;svg</span> <span class="attr">class=</span><span class="val">"glass-toast__icon"</span><span class="tag">&gt;</span>...<span class="tag">&lt;/svg&gt;</span>
diff --git a/de/index.html b/de/index.html
@@ -602,7 +602,7 @@
   <div class="header__brand">
     <div class="header__logo">🧊</div>
     <span class="header__title">GlassKit</span>
-    <span class="header__version">v1.3.3</span>
+    <span class="header__version">v1.3.4</span>
   </div>
 
   <div class="header__actions">
diff --git a/de/showcase.html b/de/showcase.html
@@ -316,7 +316,7 @@
         </button>
       </nav>
 
-      <h1 class="glass-title gl-mb-xl">Komponenten<br>Showcase v1.3.3</h1>
+      <h1 class="glass-title gl-mb-xl">Komponenten<br>Showcase v1.3.4</h1>
 
       <!-- CARD -->
       <p class="section-label">Card (Glow)</p>
diff --git a/docs.html b/docs.html
@@ -373,7 +373,7 @@
 <aside class="docs-sidebar">
   <div class="docs-sidebar__title">🧊 GlassKit</div>
   <div class="docs-sidebar__subtitle">Pure glassmorphism.</div>
-  <div class="docs-sidebar__version">v1.3.3 &ndash; Jungherz GmbH</div>
+  <div class="docs-sidebar__version">v1.3.4 &ndash; Jungherz GmbH</div>
 
   <div class="docs-sidebar__group">
     <div class="docs-sidebar__group-title">Basics</div>
@@ -436,7 +436,7 @@
     <h1>Glassmorphism UI Library</h1>
     <p>A complete CSS component library with glassmorphism aesthetics – built by Jungherz GmbH. Pure CSS, no dependencies, Dark & Light mode.</p>
     <div class="docs-hero__meta">
-      <span class="docs-hero__badge">v1.3.3</span>
+      <span class="docs-hero__badge">v1.3.4</span>
       <span class="docs-hero__badge">CSS only</span>
       <span class="docs-hero__badge">Dark + Light</span>
       <span class="docs-hero__badge">22 Components</span>
@@ -581,6 +581,35 @@ <h2>Pill-Buttons</h2>
   <section class="docs-section" id="tab-bar">
     <h2>Tab-Bar</h2>
     <p>Fixed bottom navigation with glass background and optional badge.</p>
+    <div class="docs-preview" style="position:relative;height:82px;overflow:hidden;">
+      <nav class="glass-tab-bar" style="position:absolute;bottom:0;left:0;right:0;">
+        <button class="glass-tab-bar__item is-active">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+          </span>
+          <span class="glass-tab-bar__label">Home</span>
+        </button>
+        <button class="glass-tab-bar__item">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+            <span class="glass-tab-bar__badge">3</span>
+          </span>
+          <span class="glass-tab-bar__label">Documents</span>
+        </button>
+        <button class="glass-tab-bar__item">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><path d="M12 16V4"/><polyline points="8 8 12 4 16 8"/><path d="M20 17v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1"/></svg>
+          </span>
+          <span class="glass-tab-bar__label">Upload</span>
+        </button>
+        <button class="glass-tab-bar__item">
+          <span class="glass-tab-bar__icon">
+            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+          </span>
+          <span class="glass-tab-bar__label">Settings</span>
+        </button>
+      </nav>
+    </div>
     <div class="docs-code-wrapper">
       <div class="docs-code"><span class="tag">&lt;nav</span> <span class="attr">class=</span><span class="val">"glass-tab-bar"</span><span class="tag">&gt;</span>
   <span class="tag">&lt;button</span> <span class="attr">class=</span><span class="val">"glass-tab-bar__item is-active"</span><span class="tag">&gt;</span>
@@ -704,6 +733,12 @@ <h2>Status Notice</h2>
         <p>No documents captured yet.</p>
       </div>
     </div>
+    <div class="docs-code-wrapper">
+      <div class="docs-code"><span class="tag">&lt;div</span> <span class="attr">class=</span><span class="val">"glass-status"</span><span class="tag">&gt;</span>
+  <span class="tag">&lt;svg</span> <span class="attr">viewBox=</span><span class="val">"0 0 24 24"</span><span class="tag">&gt;</span><span class="cmt">&lt;!-- Icon --&gt;</span><span class="tag">&lt;/svg&gt;</span>
+  <span class="tag">&lt;p&gt;</span>No documents captured yet.<span class="tag">&lt;/p&gt;</span>
+<span class="tag">&lt;/div&gt;</span></div>
+    </div>
   </section>
 
   <!-- MODAL -->
@@ -729,6 +764,12 @@ <h2>Modal</h2>
   <section class="docs-section" id="toast">
     <h2>Toast</h2>
     <p>Visible via <code>.is-visible</code>. Variants: <code>--success</code>, <code>--error</code>, <code>--warning</code>.</p>
+    <div class="docs-preview docs-preview--constrained" style="position:relative;min-height:60px;">
+      <div class="glass-toast glass-toast--success" style="position:relative;top:auto;left:auto;transform:none;opacity:1;pointer-events:auto;">
+        <svg class="glass-toast__icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="8 12 11 15 16 9"/></svg>
+        <span class="glass-toast__text">Document uploaded successfully!</span>
+      </div>
+    </div>
     <div class="docs-code-wrapper">
       <div class="docs-code"><span class="tag">&lt;div</span> <span class="attr">class=</span><span class="val">"glass-toast glass-toast--success"</span><span class="tag">&gt;</span>
   <span class="tag">&lt;svg</span> <span class="attr">class=</span><span class="val">"glass-toast__icon"</span><span class="tag">&gt;</span>...<span class="tag">&lt;/svg&gt;</span>
diff --git a/glasskit.css b/glasskit.css
@@ -1,6 +1,6 @@
 /* ============================================================
    GLASSKIT COMPONENT LIBRARY
-   Jungherz GmbH – v1.3.3
+   Jungherz GmbH – v1.3.4
    
    Features:
    - Scoped Reset (box-sizing Fix)
diff --git a/index.html b/index.html
@@ -602,7 +602,7 @@
   <div class="header__brand">
     <div class="header__logo">🧊</div>
     <span class="header__title">GlassKit</span>
-    <span class="header__version">v1.3.3</span>
+    <span class="header__version">v1.3.4</span>
   </div>
 
   <div class="header__actions">
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A modern glassmorphism CSS component library – inspired by iOS 26 Liquid Glass. 22 components, dark & light mode, no dependencies.",
   "main": "glasskit.css",
   "style": "glasskit.css",
diff --git a/showcase.html b/showcase.html
@@ -316,7 +316,7 @@
         </button>
       </nav>
 
-      <h1 class="glass-title gl-mb-xl">Component<br>Showcase v1.3.3</h1>
+      <h1 class="glass-title gl-mb-xl">Component<br>Showcase v1.3.4</h1>
 
       <!-- CARD -->
       <p class="section-label">Card (Glow)</p>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@jungherz-de/glasskit",`
`3`		`- "version": "1.3.3",`
	`3`	`+ "version": "1.3.4",`
`4`	`4`	`"description": "A modern glassmorphism CSS component library – inspired by iOS 26 Liquid Glass. 22 components, dark & light mode, no dependencies.",`
`5`	`5`	`"main": "glasskit.css",`
`6`	`6`	`"style": "glasskit.css",`