@jungherz-de/glasskit 1.3.1 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +117 -85
  2. package/README.md +170 -169
  3. package/glasskit-styles.js +1 -1
  4. package/glasskit.css +1 -1
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -7,13 +7,45 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
8
  ---
9
9
 
10
+ ## [1.3.3] – 2026-03-21
11
+
12
+ ### Added
13
+
14
+ - **Language switcher** in `index.html` and `docs.html` (and their German counterparts in `de/`) – toggle between English and German versions via a pill button in the header/toolbar
15
+ - **German translations** (`de/` directory) – full German versions of `index.html`, `docs.html`, and `showcase.html` with correct relative asset paths
16
+
17
+ ### Changed
18
+
19
+ - **Full English translation** of `README.md`, `CHANGELOG.md`, `index.html`, `docs.html`, and `showcase.html` – all user-facing text, labels, placeholders, code comments, and demo content
20
+ - README screenshot now links to [glasskit.jungherz.com](https://glasskit.jungherz.com)
21
+ - Version references updated to 1.3.3 across all files
22
+
23
+ ---
24
+
25
+ ## [1.3.2] – 2026-03-21
26
+
27
+ ### Added
28
+
29
+ - **Background Switcher** in `showcase.html` – interactive background picker with 6 color presets (Default, Ocean, Sunset, Forest, Rose, Monochrome) to test glassmorphism effects on different backgrounds
30
+ - Each preset has its own color values for Dark and Light Mode
31
+ - Pure CSS gradients, no external images
32
+ - Popover UI with animated color swatches, consistent with GlassKit styling
33
+ - Overrides only Custom Properties via `data-bg` attribute – no changes to `glasskit.css`
34
+
35
+ ### Changed
36
+
37
+ - Footer in `index.html` updated: "Built by Jungherz with 🧊 and lots of ❤️ for detail."
38
+ - Version references updated to 1.3.2 across all files (`package.json`, `glasskit.css`, `README.md`, `index.html`, `showcase.html`)
39
+
40
+ ---
41
+
10
42
  ## [1.3.1] – 2026-03-21
11
43
 
12
44
  ### Fixed
13
45
 
14
- - Intro-Screenshot: PNG durch optimiertes JPEG ersetzt (1.3 MB → 287 KB)
15
- - README-Bild: absolute GitHub-URL für korrekte Anzeige auf npmjs.com
16
- - Release-Pipeline: Tag-Push triggert jetzt automatisch Release + Build + npm Publish (kein manuelles Release mehr nötig)
46
+ - Intro screenshot: PNG replaced with optimized JPEG (1.3 MB → 287 KB)
47
+ - README image: absolute GitHub URL for correct display on npmjs.com
48
+ - Release pipeline: tag push now automatically triggers Release + Build + npm Publish (no manual release needed)
17
49
 
18
50
  ---
19
51
 
@@ -21,43 +53,42 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
21
53
 
22
54
  ### 🎉 Initial Public Release
23
55
 
24
- GlassKit entstand aus einem konkreten Kundenprojekt (MeineFinanzCloud /
25
- Jungherz GmbH) und wurde im Laufe des Projekts zu einer vollständigen,
26
- wiederverwendbaren Komponentenbibliothek ausgebaut. Version 1.3 ist die
27
- erste öffentliche Veröffentlichung als Open-Source-Projekt.
56
+ GlassKit originated from a real client project (MeineFinanzCloud /
57
+ Jungherz GmbH) and evolved into a complete, reusable component library
58
+ during development. Version 1.3 is the first public open-source release.
28
59
 
29
60
  ---
30
61
 
31
62
  ### Added
32
63
 
33
- #### Kern-Library (`glasskit.css`)
34
- - **Design Tokens** – vollständiges System aus CSS Custom Properties
64
+ #### Core Library (`glasskit.css`)
65
+ - **Design Tokens** – complete system of CSS Custom Properties
35
66
  (`--gl-color-*`, `--gl-surface-*`, `--gl-border-*`, `--gl-blur-*`,
36
67
  `--gl-radius-*`, `--gl-shadow-*`, `--gl-space-*`, `--gl-font-*`)
37
- - **Scoped Reset** – `box-sizing: border-box` für alle `[class*="glass-"]`
38
- Elemente, verhindert Layout-Konflikte mit bestehenden Projekten
39
- - **Dark Mode** (Standard) via `:root` / `[data-theme="dark"]`
40
- - **Light Mode** via `[data-theme="light"]` – vollständig eigene Token-Werte
68
+ - **Scoped Reset** – `box-sizing: border-box` for all `[class*="glass-"]`
69
+ elements, prevents layout conflicts with existing projects
70
+ - **Dark Mode** (default) via `:root` / `[data-theme="dark"]`
71
+ - **Light Mode** via `[data-theme="light"]` – fully separate token values
41
72
 
42
- #### Komponenten (22 gesamt)
73
+ #### Components (22 total)
43
74
 
44
- | # | Komponente | Klasse |
75
+ | # | Component | Class |
45
76
  |---|---|---|
46
- | 1 | Hintergrund | `.glass-bg` |
77
+ | 1 | Background | `.glass-bg` |
47
78
  | 2 | Navigation Bar | `.glass-nav` |
48
- | 3 | Pill-Button | `.glass-pill` |
49
- | 4 | Tab-Bar | `.glass-tab-bar` |
50
- | 5 | Seitentitel | `.glass-title` |
79
+ | 3 | Pill Button | `.glass-pill` |
80
+ | 4 | Tab Bar | `.glass-tab-bar` |
81
+ | 5 | Page Title | `.glass-title` |
51
82
  | 6 | Card | `.glass-card` |
52
83
  | 7 | Button | `.glass-btn` |
53
84
  | 8 | Badge | `.glass-badge` |
54
85
  | 9 | Avatar | `.glass-avatar` |
55
86
  | 10 | Divider | `.glass-divider` |
56
- | 11 | Status-Hinweis | `.glass-status` |
87
+ | 11 | Status Notice | `.glass-status` |
57
88
  | 12 | Input | `.glass-input` |
58
89
  | 13 | Textarea | `.glass-textarea` |
59
90
  | 14 | Select | `.glass-select` |
60
- | 15 | Suchfeld | `.glass-search` |
91
+ | 15 | Search | `.glass-search` |
61
92
  | 16 | Toggle Switch | `.glass-toggle` |
62
93
  | 17 | Checkbox | `.glass-checkbox` |
63
94
  | 18 | Radio Button | `.glass-radio` |
@@ -66,80 +97,79 @@ erste öffentliche Veröffentlichung als Open-Source-Projekt.
66
97
  | 21 | Modal | `.glass-modal` |
67
98
  | 22 | Toast | `.glass-toast` |
68
99
 
69
- #### Modifier & States
70
- - Button-Varianten: `--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`
71
- - Card-Variante: `--glow` (Hell→Milchig-Verlauf mit Lichtstreifen)
72
- - Progress-Varianten: `--sm`, `--lg`, `--success`, `--error`
73
- - Badge-Varianten: `--primary`, `--success`, `--error`
74
- - Avatar-Größen: `--sm`, `--lg`
75
- - Toast-Varianten: `--success`, `--error`, `--warning`
76
- - Modal-Actions: `--primary`, `--danger`
77
- - Interaktive States: `.is-active`, `.is-open`, `.is-visible`
78
-
79
- #### Utility-Klassen
80
- - Layout: `.gl-stack`, `.gl-row` (je mit Gap-Varianten `--xs` bis `--xl`)
100
+ #### Modifiers & States
101
+ - Button variants: `--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`
102
+ - Card variant: `--glow` (light-to-milky gradient with light streak)
103
+ - Progress variants: `--sm`, `--lg`, `--success`, `--error`
104
+ - Badge variants: `--primary`, `--success`, `--error`
105
+ - Avatar sizes: `--sm`, `--lg`
106
+ - Toast variants: `--success`, `--error`, `--warning`
107
+ - Modal actions: `--primary`, `--danger`
108
+ - Interactive states: `.is-active`, `.is-open`, `.is-visible`
109
+
110
+ #### Utility Classes
111
+ - Layout: `.gl-stack`, `.gl-row` (each with gap variants `--xs` to `--xl`)
81
112
  - Spacing: `.gl-mt-*`, `.gl-mb-*`, `.gl-px`
82
113
  - Text: `.gl-text-center`, `.gl-text-muted`, `.gl-text-sm`
83
- - Sonstige: `.gl-w-full`, `.gl-flex-1`
114
+ - Other: `.gl-w-full`, `.gl-flex-1`
84
115
 
85
- #### Dateien
86
- - `glasskit.css` – Kern-Library
87
- - `glasskit.min.css` – Minifizierte Version (auto-generated bei Release)
88
- - `glasskit-styles.js` – Constructable Stylesheet für Shadow DOM (auto-generated)
89
- - `theme-override.css` – Template für eigene Themes (4 Beispiel-Themes:
116
+ #### Files
117
+ - `glasskit.css` – Core library
118
+ - `glasskit.min.css` – Minified version (auto-generated on release)
119
+ - `glasskit-styles.js` – Constructable Stylesheet for Shadow DOM (auto-generated)
120
+ - `theme-override.css` – Template for custom themes (4 example themes:
90
121
  Ocean Blue, Emerald Green, Rose, Custom)
91
- - `build-styles-js.mjs` – Build-Script für glasskit-styles.js
92
- - `package.json` – npm-Paketdefinition
93
- - `index.html` – Landingpage mit iPhone-Wireframe & eingebettetem Showcase
94
- - `showcase.html` – Interaktiver Showcase aller 22 Komponenten
95
- - `docs.html` – Vollständige Dokumentation mit Live-Previews,
96
- Code-Blocks und Klassen-Tabellen
97
- - `README.md` – Projektdokumentation
98
- - `CHANGELOG.md` – Diese Datei
122
+ - `build-styles-js.mjs` – Build script for glasskit-styles.js
123
+ - `package.json` – npm package definition
124
+ - `index.html` – Landing page with iPhone wireframe & embedded showcase
125
+ - `showcase.html` – Interactive showcase of all 22 components
126
+ - `docs.html` – Full documentation with live previews,
127
+ code blocks, and class tables
128
+ - `README.md` – Project documentation
129
+ - `CHANGELOG.md` – This file
99
130
  - `LICENSE` – MIT License
100
131
 
101
132
  #### Build & Distribution
102
- - **GitHub Actions Release Pipeline** – automatische Minifizierung,
103
- Constructable Stylesheet Generierung und npm-Veröffentlichung bei
104
- jedem GitHub Release
105
- - **npm-Paket** `@jungherz-de/glasskit` – installierbar via npm, yarn, pnpm
106
- - **CDN-Verfügbarkeit** – sofort über jsDelivr und unpkg nutzbar
107
- - **Shadow-DOM-Support** – `glasskit-styles.js` exportiert ein fertiges
108
- Constructable Stylesheet für Web Components (Vanilla, Hybrids, Lit etc.)
133
+ - **GitHub Actions Release Pipeline** – automatic minification,
134
+ Constructable Stylesheet generation, and npm publishing on
135
+ every GitHub Release
136
+ - **npm package** `@jungherz-de/glasskit` – installable via npm, yarn, pnpm
137
+ - **CDN availability** – immediately available via jsDelivr and unpkg
138
+ - **Shadow DOM support** – `glasskit-styles.js` exports a ready-made
139
+ Constructable Stylesheet for Web Components (Vanilla, Hybrids, Lit, etc.)
109
140
 
110
141
  ---
111
142
 
112
143
  ### Fixed
113
144
 
114
- - `box-sizing: border-box` fehlte bei `.glass-input` und `.glass-textarea`,
115
- was bei bestimmten Projekten dazu führte, dass sich Felder über den
116
- Bildschirmrand hinaus ausdehnten → durch Scoped Reset global gelöst
117
- - Suchfeld-Icon (`.glass-search__icon`) war in einigen Browsern nicht
118
- sichtbar → `!important` auf `stroke`, `fill`, `stroke-width` gesetzt
119
- sowie `z-index: 2` ergänzt
120
- - Button-Icons fehlten im Showcase → SVGs zurück in alle Buttons eingefügt,
121
- Icon-Farben konsistent über `--gl-icon-*` Tokens gesteuert
122
- - Modal und Toast lagen außerhalb von `.glass-bg` und erbten dadurch keine
123
- `font-family` → `font-family: var(--gl-font-family)` direkt auf
124
- `.glass-modal-overlay` und `.glass-toast` gesetzt
125
- - iPhone-Frame: iFrame-Inhalt schien beim Scrollen an den abgerundeten Ecken
126
- durch → Fix via `isolation: isolate`, `-webkit-mask-image` und
127
- `transform: translateZ(0)` auf `.phone-frame`
145
+ - `box-sizing: border-box` was missing on `.glass-input` and `.glass-textarea`,
146
+ which caused fields to extend beyond the screen edge in certain projects
147
+ → resolved globally via Scoped Reset
148
+ - Search icon (`.glass-search__icon`) was not visible in some browsers
149
+ → added `!important` on `stroke`, `fill`, `stroke-width` and `z-index: 2`
150
+ - Button icons were missing in the showcase → SVGs re-added to all buttons,
151
+ icon colors consistently controlled via `--gl-icon-*` tokens
152
+ - Modal and Toast were placed outside `.glass-bg` and therefore did not inherit
153
+ `font-family` → `font-family: var(--gl-font-family)` set directly on
154
+ `.glass-modal-overlay` and `.glass-toast`
155
+ - iPhone frame: iframe content was showing through rounded corners on scroll
156
+ → fixed via `isolation: isolate`, `-webkit-mask-image`, and
157
+ `transform: translateZ(0)` on `.phone-frame`
128
158
 
129
159
  ---
130
160
 
131
161
  ### Design Decisions
132
162
 
133
- - **Glassmorphism inspiriert von iOS 26 Liquid Glass** – Apple hat mit iOS 26
134
- das Glasdesign grundlegend neu definiert. GlassKit übersetzt diesen Look
135
- in reines CSS für Web und App.
136
- - **Keine JavaScript-Abhängigkeiten** – Alle Animationen und Übergänge
137
- laufen rein über CSS Transitions. Nur Modal, Toast und Accordion benötigen
138
- minimales `classList.toggle()` ohne Framework.
139
- - **BEM-artige Namenskonvention** – `glass-*` Prefix verhindert Konflikte
140
- mit bestehendem CSS im Zielprojekt.
141
- - **Token-First** – Jeder visuelle Wert ist ein Token. Theming erfordert
142
- keine Änderungen an der Kern-Library.
163
+ - **Glassmorphism inspired by iOS 26 Liquid Glass** – Apple fundamentally
164
+ redefined glass design with iOS 26. GlassKit translates this look
165
+ into pure CSS for web and apps.
166
+ - **No JavaScript dependencies** – All animations and transitions
167
+ run purely via CSS Transitions. Only Modal, Toast, and Accordion require
168
+ minimal `classList.toggle()` without any framework.
169
+ - **BEM-like naming convention** – `glass-*` prefix prevents conflicts
170
+ with existing CSS in the target project.
171
+ - **Token-first** – Every visual value is a token. Theming requires
172
+ no changes to the core library.
143
173
 
144
174
  ---
145
175
 
@@ -148,21 +178,23 @@ erste öffentliche Veröffentlichung als Open-Source-Projekt.
148
178
  - Repository: [github.com/JUNGHERZ/GlassKit](https://github.com/JUNGHERZ/GlassKit)
149
179
  - npm: [@jungherz-de/glasskit](https://www.npmjs.com/package/@jungherz-de/glasskit)
150
180
  - CDN: [cdn.jsdelivr.net/npm/@jungherz-de/glasskit](https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/)
151
- - Lizenz: MIT
152
- - Entwickelt von: [Jungherz GmbH](https://www.jungherz.com)
181
+ - License: MIT
182
+ - Developed by: [Jungherz GmbH](https://www.jungherz.com)
153
183
 
154
184
  ---
155
185
 
156
186
  ## [Unreleased]
157
187
 
158
- > Geplante Erweiterungen für kommende Versionen:
188
+ > Planned additions for future versions:
159
189
 
160
- - [ ] Weitere Themes (Purple, Midnight, Sand)
161
- - [ ] Animierte Hintergründe (Aurora-Motion)
162
- - [ ] Figma-Komponentenset
190
+ - [ ] Additional themes (Purple, Midnight, Sand)
191
+ - [ ] Animated backgrounds (Aurora Motion)
192
+ - [ ] Figma component set
163
193
 
164
194
  ---
165
195
 
196
+ [1.3.3]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.3
197
+ [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
166
198
  [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
167
199
  [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
168
- [Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.1...HEAD
200
+ [Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.3...HEAD
package/README.md CHANGED
@@ -1,9 +1,9 @@
1
1
  <p align="center">
2
- <img src="https://img.shields.io/badge/version-1.3-orange?style=flat-square" alt="Version">
2
+ <img src="https://img.shields.io/badge/version-1.3.3-orange?style=flat-square" alt="Version">
3
3
  <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
4
4
  <img src="https://img.shields.io/badge/components-22-green?style=flat-square" alt="Components">
5
5
  <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
6
- <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.0-f5a623?style=flat-square" alt="Changelog"></a>
6
+ <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.3-f5a623?style=flat-square" alt="Changelog"></a>
7
7
  <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>
8
8
  <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>
9
9
  </p>
@@ -11,72 +11,72 @@
11
11
  <h1 align="center">🧊 GlassKit</h1>
12
12
 
13
13
  <p align="center">
14
- <img src="https://raw.githubusercontent.com/JUNGHERZ/GlassKit/main/intro_screenshot.jpg" alt="GlassKit Preview" width="720">
14
+ <a href="https://glasskit.jungherz.com"><img src="https://raw.githubusercontent.com/JUNGHERZ/GlassKit/main/intro_screenshot.jpg" alt="GlassKit Preview" width="720"></a>
15
15
  </p>
16
16
 
17
17
  <p align="center">
18
18
  <strong>A modern glassmorphism CSS component library.</strong><br>
19
- 22 Komponenten · Dark & Light Mode · Keine Abhängigkeiten · Design Tokens
19
+ 22 Components · Dark & Light Mode · No Dependencies · Design Tokens
20
20
  </p>
21
21
 
22
22
  <p align="center">
23
23
  <a href="#-installation">Installation</a> ·
24
24
  <a href="#-quick-start">Quick Start</a> ·
25
- <a href="#-komponenten">Komponenten</a> ·
25
+ <a href="#-components">Components</a> ·
26
26
  <a href="#-theming">Theming</a> ·
27
27
  <a href="#-web-components--shadow-dom">Web Components</a> ·
28
- <a href="#-dokumentation">Docs</a> ·
28
+ <a href="#-documentation">Docs</a> ·
29
29
  <a href="CHANGELOG.md">Changelog</a> ·
30
- <a href="#-lizenz">Lizenz</a>
30
+ <a href="#-license">License</a>
31
31
  </p>
32
32
 
33
33
  ---
34
34
 
35
- ## ✨ Was ist GlassKit?
35
+ ## ✨ What is GlassKit?
36
36
 
37
- GlassKit ist eine vollständige **CSS-Komponentenbibliothek** im Glassmorphism-Stil – inspiriert von **iOS 26 Liquid Glass** und visionOS. Apple hat mit iOS 26 das Glasdesign grundlegend neu definiert: tiefere Blur-Effekte, leuchtende Ränder und dynamische Lichtreflexe auf Oberflächen. GlassKit bringt genau diesen Look ins Web – für Apps und UIs, die sich modern und nativ anfühlen.
37
+ GlassKit is a complete **CSS component library** with glassmorphism aesthetics – inspired by **iOS 26 Liquid Glass** and visionOS. Apple fundamentally redefined glass design with iOS 26: deeper blur effects, luminous borders, and dynamic light reflections on surfaces. GlassKit brings exactly this look to the web – for apps and UIs that feel modern and native.
38
38
 
39
- **Eine CSS-Datei. Keine Build-Tools. Keine Abhängigkeiten.**
39
+ **One CSS file. No build tools. No dependencies.**
40
40
 
41
41
  <br>
42
42
 
43
- ### Warum GlassKit?
43
+ ### Why GlassKit?
44
44
 
45
- - 🎨 **Reines CSS** – kein JavaScript-Framework nötig
46
- - 🌗 **Dark & Light Mode** – ein Attribut wechseln genügt
47
- - 🎛️ **Design Tokens** – alle Werte zentral über CSS Custom Properties steuerbar
48
- - 📱 **Mobile-first** – optimiert für Touch-Geräte und `safe-area-inset`
49
- - 🔌 **Framework-agnostisch** – funktioniert mit React, Vue, Svelte, plain HTML oder jedem anderen Stack
50
- - 🧩 **Shadow-DOM-ready** – Constructable Stylesheet für Web Components mitgeliefert
51
- - 🪶 **Leichtgewichtig** – ~45 KB (unkomprimiert), keine externen Abhängigkeiten
52
- - 🎯 **BEM-artige Namenskonvention** – `glass-*` Prefix, kein Konflikt mit bestehendem CSS
45
+ - 🎨 **Pure CSS** – no JavaScript framework required
46
+ - 🌗 **Dark & Light Mode** – toggle with a single attribute
47
+ - 🎛️ **Design Tokens** – all values controlled via CSS Custom Properties
48
+ - 📱 **Mobile-first** – optimized for touch devices and `safe-area-inset`
49
+ - 🔌 **Framework-agnostic** – works with React, Vue, Svelte, plain HTML, or any other stack
50
+ - 🧩 **Shadow DOM ready** – Constructable Stylesheet for Web Components included
51
+ - 🪶 **Lightweight** – ~45 KB (uncompressed), no external dependencies
52
+ - 🎯 **BEM-like naming convention** – `glass-*` prefix, no conflicts with existing CSS
53
53
 
54
54
  ---
55
55
 
56
56
  ## 📥 Installation
57
57
 
58
- GlassKit kann auf verschiedenen Wegen eingebunden werden – wähle den, der am besten zu deinem Projekt passt:
58
+ GlassKit can be included in several ways – choose the one that best fits your project:
59
59
 
60
- ### CDN (empfohlen für schnellen Einstieg)
60
+ ### CDN (recommended for quick start)
61
61
 
62
- Kein Download, kein Build-Tool – einfach einbinden und loslegen:
62
+ No download, no build tool – just include and go:
63
63
 
64
64
  ```html
65
- <!-- jsDelivr – Minifiziert -->
66
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.3.0/glasskit.min.css">
65
+ <!-- jsDelivr – Minified -->
66
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.3/glasskit.min.css">
67
67
 
68
- <!-- jsDelivr – Unminifiziert (zum Lesen/Debuggen) -->
69
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.3.0/glasskit.css">
68
+ <!-- jsDelivr – Unminified (for reading/debugging) -->
69
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.3/glasskit.css">
70
70
 
71
71
  <!-- unpkg – Alternative -->
72
- <link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.3.0/glasskit.min.css">
72
+ <link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.3/glasskit.min.css">
73
73
  ```
74
74
 
75
- > **Tipp:** Ersetze `@1.3.0` durch `@latest` für immer die neueste Version – oder pinne auf eine feste Version für maximale Stabilität.
75
+ > **Tip:** Replace `@1.3` with `@latest` for the newest version – or pin to a specific version for maximum stability.
76
76
 
77
77
  ### npm / yarn / pnpm
78
78
 
79
- Für Projekte mit Build-Pipeline:
79
+ For projects with a build pipeline:
80
80
 
81
81
  ```bash
82
82
  # npm
@@ -89,27 +89,27 @@ yarn add @jungherz-de/glasskit
89
89
  pnpm add @jungherz-de/glasskit
90
90
  ```
91
91
 
92
- Danach im CSS oder Build-Tool importieren:
92
+ Then import in your CSS or build tool:
93
93
 
94
94
  ```css
95
- /* In deiner CSS-Datei */
95
+ /* In your CSS file */
96
96
  @import '@jungherz-de/glasskit/glasskit.css';
97
97
  ```
98
98
 
99
99
  ```js
100
- // Oder in JS (Webpack, Vite, etc.)
100
+ // Or in JS (Webpack, Vite, etc.)
101
101
  import '@jungherz-de/glasskit/glasskit.css';
102
102
  ```
103
103
 
104
- ### Direkter Download
104
+ ### Direct Download
105
105
 
106
- Lade die Dateien direkt vom [GitHub Release](https://github.com/JUNGHERZ/GlassKit/releases/latest) herunter:
106
+ Download the files directly from the [GitHub Release](https://github.com/JUNGHERZ/GlassKit/releases/latest):
107
107
 
108
108
  ```html
109
- <!-- Lokal einbinden -->
109
+ <!-- Include locally -->
110
110
  <link rel="stylesheet" href="glasskit.min.css">
111
111
 
112
- <!-- Optional: eigenes Theme -->
112
+ <!-- Optional: custom theme -->
113
113
  <link rel="stylesheet" href="theme-override.css">
114
114
  ```
115
115
 
@@ -117,17 +117,17 @@ Lade die Dateien direkt vom [GitHub Release](https://github.com/JUNGHERZ/GlassKi
117
117
 
118
118
  ## 🚀 Quick Start
119
119
 
120
- ### 1. Theme setzen
120
+ ### 1. Set the theme
121
121
 
122
122
  ```html
123
- <!-- Dark Mode (Standard) -->
123
+ <!-- Dark Mode (default) -->
124
124
  <html data-theme="dark">
125
125
 
126
126
  <!-- Light Mode -->
127
127
  <html data-theme="light">
128
128
  ```
129
129
 
130
- ### 2. Loslegen
130
+ ### 2. Start building
131
131
 
132
132
  ```html
133
133
  <div class="glass-bg">
@@ -138,14 +138,14 @@ Lade die Dateien direkt vom [GitHub Release](https://github.com/JUNGHERZ/GlassKi
138
138
  </button>
139
139
  </nav>
140
140
 
141
- <h1 class="glass-title">Hallo Welt</h1>
141
+ <h1 class="glass-title">Hello World</h1>
142
142
 
143
143
  <div class="glass-card glass-card--glow">
144
- <p class="glass-card__text">Das ist GlassKit.</p>
144
+ <p class="glass-card__text">This is GlassKit.</p>
145
145
  </div>
146
146
 
147
147
  <button class="glass-btn glass-btn--primary">
148
- Los geht's
148
+ Get Started
149
149
  </button>
150
150
 
151
151
  </div>
@@ -153,53 +153,53 @@ Lade die Dateien direkt vom [GitHub Release](https://github.com/JUNGHERZ/GlassKi
153
153
 
154
154
  ---
155
155
 
156
- ## 📦 Komponenten
156
+ ## 📦 Components
157
157
 
158
158
  ### Navigation & Layout
159
159
 
160
- | Komponente | Klasse | Beschreibung |
160
+ | Component | Class | Description |
161
161
  |---|---|---|
162
- | **Hintergrund** | `.glass-bg` | Aurora-Gradient mit Lichteffekten |
163
- | **Nav-Bar** | `.glass-nav` | Transparente Navigation |
164
- | **Pill-Button** | `.glass-pill` | Runder Glas-Icon-Button (46×46) |
165
- | **Tab-Bar** | `.glass-tab-bar` | Fixierte Bottom-Navigation |
166
- | **Accordion** | `.glass-accordion` | Aufklappbare Inhalte |
167
- | **Divider** | `.glass-divider` | Fading-Trennlinie |
162
+ | **Background** | `.glass-bg` | Aurora gradient with light effects |
163
+ | **Nav Bar** | `.glass-nav` | Transparent navigation |
164
+ | **Pill Button** | `.glass-pill` | Round glass icon button (46×46) |
165
+ | **Tab Bar** | `.glass-tab-bar` | Fixed bottom navigation |
166
+ | **Accordion** | `.glass-accordion` | Collapsible content sections |
167
+ | **Divider** | `.glass-divider` | Fading separator line |
168
168
 
169
- ### Inhalte
169
+ ### Content
170
170
 
171
- | Komponente | Klasse | Beschreibung |
171
+ | Component | Class | Description |
172
172
  |---|---|---|
173
- | **Titel** | `.glass-title` | Seitentitel mit Text-Shadow |
174
- | **Card** | `.glass-card` | Glas-Container für Inhalte |
175
- | **Card (Glow)** | `.glass-card--glow` | Card mit Hell→Milchig-Verlauf |
176
- | **Badge** | `.glass-badge` | Tags & Labels |
177
- | **Avatar** | `.glass-avatar` | Glas-Kreis (sm/md/lg) |
178
- | **Status** | `.glass-status` | Hinweis-Card mit Icon |
173
+ | **Title** | `.glass-title` | Page title with text shadow |
174
+ | **Card** | `.glass-card` | Glass container for content |
175
+ | **Card (Glow)** | `.glass-card--glow` | Card with light-to-milky gradient |
176
+ | **Badge** | `.glass-badge` | Tags & labels |
177
+ | **Avatar** | `.glass-avatar` | Glass circle (sm/md/lg) |
178
+ | **Status** | `.glass-status` | Notice card with icon |
179
179
 
180
- ### Aktionen & Feedback
180
+ ### Actions & Feedback
181
181
 
182
- | Komponente | Klasse | Beschreibung |
182
+ | Component | Class | Description |
183
183
  |---|---|---|
184
- | **Button (Primary)** | `.glass-btn--primary` | Farbiger Gradient – Hauptaktion |
185
- | **Button (Secondary)** | `.glass-btn--secondary` | Milchig-weiß – Sekundäraktion |
186
- | **Button (Tertiary)** | `.glass-btn--tertiary` | Subtiles Glas – Tertiäraktion |
187
- | **Modal** | `.glass-modal` | Zentrierter Dialog mit Blur-Overlay |
188
- | **Toast** | `.glass-toast` | Temporäre Benachrichtigung |
184
+ | **Button (Primary)** | `.glass-btn--primary` | Colored gradient – primary action |
185
+ | **Button (Secondary)** | `.glass-btn--secondary` | Milky white – secondary action |
186
+ | **Button (Tertiary)** | `.glass-btn--tertiary` | Subtle glass – tertiary action |
187
+ | **Modal** | `.glass-modal` | Centered dialog with blur overlay |
188
+ | **Toast** | `.glass-toast` | Temporary notification |
189
189
 
190
- ### Formularelemente
190
+ ### Form Elements
191
191
 
192
- | Komponente | Klasse | Beschreibung |
192
+ | Component | Class | Description |
193
193
  |---|---|---|
194
- | **Input** | `.glass-input` | Textfeld mit Glas-Hintergrund |
195
- | **Textarea** | `.glass-textarea` | Mehrzeilige Eingabe |
196
- | **Select** | `.glass-select` | Dropdown mit Custom-Chevron |
197
- | **Suchfeld** | `.glass-search` | Input mit Lupen-Icon |
198
- | **Toggle** | `.glass-toggle` | iOS-artiger Switch |
199
- | **Checkbox** | `.glass-checkbox` | Animiertes Häkchen |
200
- | **Radio** | `.glass-radio` | Animierter Punkt |
201
- | **Range Slider** | `.glass-range` | Slider mit Gradient-Thumb |
202
- | **Progress Bar** | `.glass-progress` | Fortschrittsbalken mit Schimmer |
194
+ | **Input** | `.glass-input` | Text field with glass background |
195
+ | **Textarea** | `.glass-textarea` | Multi-line input |
196
+ | **Select** | `.glass-select` | Dropdown with custom chevron |
197
+ | **Search** | `.glass-search` | Input with search icon |
198
+ | **Toggle** | `.glass-toggle` | iOS-style switch |
199
+ | **Checkbox** | `.glass-checkbox` | Animated checkmark |
200
+ | **Radio** | `.glass-radio` | Animated dot |
201
+ | **Range Slider** | `.glass-range` | Slider with gradient thumb |
202
+ | **Progress Bar** | `.glass-progress` | Progress bar with shimmer |
203
203
 
204
204
  ---
205
205
 
@@ -207,7 +207,7 @@ Lade die Dateien direkt vom [GitHub Release](https://github.com/JUNGHERZ/GlassKi
207
207
 
208
208
  ### Dark / Light Mode
209
209
 
210
- GlassKit unterstützt zwei Themes out of the box. Der Wechsel erfolgt über ein `data-theme` Attribut:
210
+ GlassKit supports two themes out of the box. Toggle via the `data-theme` attribute:
211
211
 
212
212
  ```js
213
213
  // Toggle
@@ -218,7 +218,7 @@ function toggleTheme() {
218
218
  }
219
219
  ```
220
220
 
221
- Es gibt auch eine fertige **Theme-Toggle-Komponente**:
221
+ There's also a ready-made **Theme Toggle component**:
222
222
 
223
223
  ```html
224
224
  <button class="glass-theme-toggle" onclick="toggleTheme()">
@@ -227,14 +227,14 @@ Es gibt auch eine fertige **Theme-Toggle-Komponente**:
227
227
  </svg>
228
228
  <svg class="icon-sun" viewBox="0 0 24 24">
229
229
  <circle cx="12" cy="12" r="5"/>
230
- <!-- ... Strahlen ... -->
230
+ <!-- ... rays ... -->
231
231
  </svg>
232
232
  </button>
233
233
  ```
234
234
 
235
- ### Eigene Markenfarben
235
+ ### Custom Brand Colors
236
236
 
237
- Erstelle eine `theme-override.css` und lade sie **nach** der Basis-Library:
237
+ Create a `theme-override.css` and load it **after** the base library:
238
238
 
239
239
  ```css
240
240
  /* theme-override.css */
@@ -252,29 +252,29 @@ Erstelle eine `theme-override.css` und lade sie **nach** der Basis-Library:
252
252
  }
253
253
  ```
254
254
 
255
- Im `theme-override.css` Template sind bereits **4 Beispiel-Themes** vorbereitet:
255
+ The `theme-override.css` template comes with **4 example themes**:
256
256
  - 🔵 Ocean Blue
257
257
  - 🟢 Emerald Green
258
258
  - 🌹 Rose
259
- - 🎨 Custom (leer, zum Ausfüllen)
259
+ - 🎨 Custom (empty, ready to fill)
260
260
 
261
261
  ---
262
262
 
263
263
  ## 🎛️ Design Tokens
264
264
 
265
- Alle visuellen Werte werden über CSS Custom Properties gesteuert:
265
+ All visual values are controlled via CSS Custom Properties:
266
266
 
267
267
  ```css
268
- /* Farben */
269
- --gl-color-primary /* Primärfarbe */
270
- --gl-color-text /* Textfarbe */
271
- --gl-color-text-muted /* Sekundärer Text */
268
+ /* Colors */
269
+ --gl-color-primary /* Primary color */
270
+ --gl-color-text /* Text color */
271
+ --gl-color-text-muted /* Secondary text */
272
272
 
273
- /* Glasflächen (Abstufungen) */
273
+ /* Glass surfaces (gradations) */
274
274
  --gl-surface-1 … --gl-surface-5
275
275
 
276
276
  /* Blur */
277
- --gl-blur /* 24px – Standard */
277
+ --gl-blur /* 24px – default */
278
278
  --gl-blur-light /* 16px */
279
279
  --gl-blur-heavy /* 40px */
280
280
 
@@ -291,23 +291,23 @@ Alle visuellen Werte werden über CSS Custom Properties gesteuert:
291
291
  --gl-inset-strong
292
292
  ```
293
293
 
294
- Die vollständige Token-Referenz findest du in der [Dokumentation](docs.html).
294
+ The full token reference can be found in the [Documentation](docs.html).
295
295
 
296
296
  ---
297
297
 
298
- ## 🛠️ Utility-Klassen
298
+ ## 🛠️ Utility Classes
299
299
 
300
300
  ```css
301
- /* Flex-Layout */
302
- .gl-stack /* Vertikaler Stack */
301
+ /* Flex Layout */
302
+ .gl-stack /* Vertical stack */
303
303
  .gl-stack--sm /* Gap: 12px */
304
- .gl-row /* Horizontale Reihe */
304
+ .gl-row /* Horizontal row */
305
305
  .gl-row--sm /* Gap: 12px */
306
306
 
307
307
  /* Spacing */
308
- .gl-mt-md /* Margin-Top: 16px */
309
- .gl-mb-lg /* Margin-Bottom: 20px */
310
- .gl-px /* Padding horizontal */
308
+ .gl-mt-md /* Margin-top: 16px */
309
+ .gl-mb-lg /* Margin-bottom: 20px */
310
+ .gl-px /* Horizontal padding */
311
311
 
312
312
  /* Text */
313
313
  .gl-text-center
@@ -323,22 +323,22 @@ Die vollständige Token-Referenz findest du in der [Dokumentation](docs.html).
323
323
 
324
324
  ## 🧩 Web Components / Shadow DOM
325
325
 
326
- Das Shadow DOM kapselt Styles – externe Stylesheets wie `glasskit.css` werden nicht automatisch in den Shadow Tree vererbt. GlassKit liefert deshalb ein fertiges **Constructable Stylesheet** mit, das du direkt in Web Components nutzen kannst.
326
+ The Shadow DOM encapsulates styles – external stylesheets like `glasskit.css` are not automatically inherited into the shadow tree. GlassKit therefore ships a ready-made **Constructable Stylesheet** that you can use directly in Web Components.
327
327
 
328
- ### Das Problem
328
+ ### The Problem
329
329
 
330
- - CSS-Klassen (`.glass-card`, `.glass-btn` etc.) wirken **nicht** im Shadow DOM
331
- - Nur **CSS Custom Properties** (`--gl-*`) durchdringen die Shadow-Boundary automatisch
332
- - Ohne Lösung müsste jede Komponente das CSS selbst laden und parsen
330
+ - CSS classes (`.glass-card`, `.glass-btn`, etc.) do **not** work inside the Shadow DOM
331
+ - Only **CSS Custom Properties** (`--gl-*`) penetrate the shadow boundary automatically
332
+ - Without a solution, each component would need to load and parse the CSS itself
333
333
 
334
- ### Die Lösung: `glasskit-styles.js`
334
+ ### The Solution: `glasskit-styles.js`
335
335
 
336
- GlassKit stellt ein ES-Modul bereit, das die minifizierte CSS als [Constructable Stylesheet](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet) exportiert. Das Stylesheet wird **einmal** im Speicher gehalten und kann von beliebig vielen Shadow Roots geteilt werden – ohne doppeltes Parsen.
336
+ GlassKit provides an ES module that exports the minified CSS as a [Constructable Stylesheet](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet). The stylesheet is held **once** in memory and can be shared across any number of shadow roots – without duplicate parsing.
337
337
 
338
338
  ```js
339
339
  import { glassSheet } from '@jungherz-de/glasskit/glasskit-styles.js';
340
340
 
341
- // In einer Web Component:
341
+ // In a Web Component:
342
342
  class MyCard extends HTMLElement {
343
343
  constructor() {
344
344
  super();
@@ -354,9 +354,9 @@ class MyCard extends HTMLElement {
354
354
  customElements.define('my-card', MyCard);
355
355
  ```
356
356
 
357
- ### Beispiel: Hybrids.js
357
+ ### Example: Hybrids.js
358
358
 
359
- GlassKit funktioniert hervorragend mit leichtgewichtigen Web-Component-Frameworks wie [Hybrids](https://hybrids.js.org/):
359
+ GlassKit works great with lightweight Web Component frameworks like [Hybrids](https://hybrids.js.org/):
360
360
 
361
361
  ```js
362
362
  import { define, html } from 'hybrids';
@@ -374,7 +374,7 @@ define({
374
374
  });
375
375
  ```
376
376
 
377
- ### Beispiel: Lit
377
+ ### Example: Lit
378
378
 
379
379
  ```js
380
380
  import { LitElement, html } from 'lit';
@@ -396,105 +396,106 @@ customElements.define('my-card', MyCard);
396
396
 
397
397
  ### Exports
398
398
 
399
- | Export | Typ | Beschreibung |
399
+ | Export | Type | Description |
400
400
  |---|---|---|
401
- | `glassSheet` | `CSSStyleSheet` | Fertiges Constructable Stylesheet – direkt für `adoptedStyleSheets` |
402
- | `css` | `string` | CSS als String – Fallback für Umgebungen ohne Constructable Stylesheet Support |
401
+ | `glassSheet` | `CSSStyleSheet` | Ready-made Constructable Stylesheet – use directly with `adoptedStyleSheets` |
402
+ | `css` | `string` | CSS as string – fallback for environments without Constructable Stylesheet support |
403
403
 
404
- ### Theming im Shadow DOM
404
+ ### Theming in the Shadow DOM
405
405
 
406
- Da CSS Custom Properties die Shadow-Boundary durchdringen, funktioniert der **Theme-Wechsel automatisch**. Setze `data-theme` wie gewohnt auf dem `<html>` Element – alle GlassKit-Tokens werden in allen Shadow Roots aktualisiert:
406
+ Since CSS Custom Properties penetrate the shadow boundary, **theme switching works automatically**. Set `data-theme` on the `<html>` element as usual – all GlassKit tokens will be updated across all shadow roots:
407
407
 
408
408
  ```js
409
- // Funktioniert global – auch für alle Web Components
409
+ // Works globally – including all Web Components
410
410
  document.documentElement.setAttribute('data-theme', 'light');
411
411
  ```
412
412
 
413
- > **Tipp:** Für maximale Performance bei vielen Komponenten-Instanzen empfiehlt es sich, `glassSheet` einmal zu importieren und in allen Komponenten zu teilen. Der Browser hält das Stylesheet nur einmal im Speicher.
413
+ > **Tip:** For maximum performance with many component instances, import `glassSheet` once and share it across all components. The browser keeps the stylesheet in memory only once.
414
414
 
415
415
  ---
416
416
 
417
- ## 📁 Projektstruktur
417
+ ## 📁 Project Structure
418
418
 
419
419
  ```
420
420
  glasskit/
421
- ├── glasskit.css # Kern-Library (alle Komponenten + Tokens)
422
- ├── glasskit.min.css # Minifizierte Version (auto-generated bei Release)
423
- ├── glasskit-styles.js # Constructable Stylesheet für Shadow DOM (auto-generated)
424
- ├── theme-override.css # Template für eigene Themes
425
- ├── build-styles-js.mjs # Build-Script für glasskit-styles.js
426
- ├── package.json # npm-Paketdefinition
427
- ├── index.html # Landingpage mit iPhone-Wireframe
428
- ├── showcase.html # Interaktiver Showcase aller Komponenten
429
- ├── docs.html # Vollständige Dokumentation
421
+ ├── glasskit.css # Core library (all components + tokens)
422
+ ├── glasskit.min.css # Minified version (auto-generated on release)
423
+ ├── glasskit-styles.js # Constructable Stylesheet for Shadow DOM (auto-generated)
424
+ ├── theme-override.css # Template for custom themes
425
+ ├── build-styles-js.mjs # Build script for glasskit-styles.js
426
+ ├── package.json # npm package definition
427
+ ├── index.html # Landing page with iPhone wireframe
428
+ ├── showcase.html # Interactive showcase of all components
429
+ ├── docs.html # Full documentation
430
+ ├── de/ # German translations (index, docs, showcase)
430
431
  ├── LICENSE # MIT License
431
- └── README.md # Diese Datei
432
+ └── README.md # This file
432
433
  ```
433
434
 
434
435
  ---
435
436
 
436
- ## 📖 Dokumentation
437
+ ## 📖 Documentation
437
438
 
438
- Die vollständige Dokumentation mit **Live-Previews**, **Copy-Paste Code-Blocks** und **Klassen-Tabellen** findest du in der `docs.html`:
439
+ The full documentation with **live previews**, **copy-paste code blocks**, and **class reference tables** is available in `docs.html`:
439
440
 
440
- - Sidebar-Navigation zu allen 22 Komponenten
441
- - Live-Previews im echten Glasmorphism-Hintergrund
442
- - Design-Token-Referenz
443
- - Theming-Anleitung
444
- - Komplette Klassen-Übersicht am Ende
441
+ - Sidebar navigation to all 22 components
442
+ - Live previews on a real glassmorphism background
443
+ - Design token reference
444
+ - Theming guide
445
+ - Complete class overview at the end
445
446
 
446
447
  ---
447
448
 
448
- ## 🌐 Browser-Kompatibilität
449
+ ## 🌐 Browser Compatibility
449
450
 
450
- GlassKit nutzt `backdrop-filter` für die Glaseffekte. Support:
451
+ GlassKit uses `backdrop-filter` for glass effects. Support:
451
452
 
452
453
  | Browser | Support |
453
454
  |---|---|
454
- | Safari (iOS/macOS) | ✅ Voll |
455
- | Chrome / Edge | ✅ Voll |
456
- | Firefox | ✅ Ab Version 103 |
457
- | Samsung Internet | ✅ Voll |
455
+ | Safari (iOS/macOS) | ✅ Full |
456
+ | Chrome / Edge | ✅ Full |
457
+ | Firefox | ✅ From version 103 |
458
+ | Samsung Internet | ✅ Full |
458
459
 
459
- > **Hinweis:** In Browsern ohne `backdrop-filter`-Support werden die Elemente mit den definierten Hintergrundfarben dargestellt – die UI bleibt nutzbar, nur ohne Blur-Effekt.
460
+ > **Note:** In browsers without `backdrop-filter` support, elements will be rendered with the defined background colors – the UI remains usable, just without the blur effect.
460
461
 
461
462
  ---
462
463
 
463
- ## 📋 States & Modifier – Cheat Sheet
464
+ ## 📋 States & Modifiers – Cheat Sheet
464
465
 
465
466
  ```
466
- Interaktive States:
467
- .is-active → Tab-Bar Item, Modal Overlay
468
- .is-open → Accordion Item
467
+ Interactive States:
468
+ .is-active → Tab Bar item, Modal Overlay
469
+ .is-open → Accordion item
469
470
  .is-visible → Toast
470
471
  :checked → Toggle, Checkbox, Radio
471
472
  :focus → Input, Textarea, Select, Range
472
473
  :disabled → Input
473
474
 
474
- Button-Modifier:
475
+ Button Modifiers:
475
476
  .glass-btn--primary / --secondary / --tertiary
476
477
  .glass-btn--sm / --lg / --auto
477
478
 
478
- Card-Modifier:
479
+ Card Modifiers:
479
480
  .glass-card--glow
480
481
 
481
- Progress-Modifier:
482
+ Progress Modifiers:
482
483
  .glass-progress--sm / --lg
483
484
  .glass-progress--success / --error
484
485
 
485
- Badge-Modifier:
486
+ Badge Modifiers:
486
487
  .glass-badge--primary / --success / --error
487
488
 
488
- Avatar-Modifier:
489
+ Avatar Modifiers:
489
490
  .glass-avatar--sm / --lg
490
491
 
491
- Toast-Modifier:
492
+ Toast Modifiers:
492
493
  .glass-toast--success / --error / --warning
493
494
 
494
- Modal-Action-Modifier:
495
+ Modal Action Modifiers:
495
496
  .glass-modal__action--primary / --danger
496
497
 
497
- Background-Modifier:
498
+ Background Modifiers:
498
499
  .glass-bg--has-tab-bar
499
500
  ```
500
501
 
@@ -502,43 +503,43 @@ Background-Modifier:
502
503
 
503
504
  ## 🤝 Contributing
504
505
 
505
- Beiträge sind willkommen! So kannst du helfen:
506
+ Contributions are welcome! Here's how you can help:
506
507
 
507
- 1. **Fork** das Repository
508
- 2. Erstelle einen **Feature-Branch** (`git checkout -b feature/meine-idee`)
509
- 3. **Commit** deine Änderungen (`git commit -m 'feat: Neue Komponente XY'`)
510
- 4. **Push** den Branch (`git push origin feature/meine-idee`)
511
- 5. Öffne einen **Pull Request**
508
+ 1. **Fork** the repository
509
+ 2. Create a **feature branch** (`git checkout -b feature/my-idea`)
510
+ 3. **Commit** your changes (`git commit -m 'feat: New component XY'`)
511
+ 4. **Push** the branch (`git push origin feature/my-idea`)
512
+ 5. Open a **Pull Request**
512
513
 
513
514
  ### Guidelines
514
515
 
515
- - Halte die **BEM-artige Namenskonvention** ein (`glass-*` Prefix)
516
- - Nutze bestehende **Design Tokens** statt harter Werte
517
- - Stelle sicher, dass neue Komponenten in **Dark und Light Mode** funktionieren
518
- - Teste auf **Mobile** (Touch-Targets mindestens 44px)
516
+ - Follow the **BEM-like naming convention** (`glass-*` prefix)
517
+ - Use existing **Design Tokens** instead of hard-coded values
518
+ - Make sure new components work in **both Dark and Light Mode**
519
+ - Test on **mobile** (touch targets at least 44px)
519
520
 
520
521
  ---
521
522
 
522
- ## 📄 Lizenz
523
+ ## 📄 License
523
524
 
524
- GlassKit ist unter der **MIT License** veröffentlicht. Siehe [LICENSE](LICENSE) für Details.
525
+ GlassKit is released under the **MIT License**. See [LICENSE](LICENSE) for details.
525
526
 
526
- Frei nutzbar für persönliche und kommerzielle Projekte.
527
+ Free to use for personal and commercial projects.
527
528
 
528
529
  ---
529
530
 
530
531
  ## 📋 Changelog
531
532
 
532
- Alle Änderungen, Bugfixes und Design Decisions sind im **[CHANGELOG.md](CHANGELOG.md)** dokumentiert.
533
+ All changes, bugfixes, and design decisions are documented in the **[CHANGELOG.md](CHANGELOG.md)**.
533
534
 
534
535
  ---
535
536
 
536
537
  ## 🏢 Credits
537
538
 
538
- Entwickelt von der **[Jungherz GmbH](https://www.jungherz.com)**
539
+ Developed by **[Jungherz GmbH](https://www.jungherz.com)**
539
540
 
540
541
  ---
541
542
 
542
543
  <p align="center">
543
- <sub>Gebaut mit 🧊 und viel Liebe zum Detail.</sub>
544
+ <sub>Built with 🧊 and lots of attention to detail.</sub>
544
545
  </p>
package/glasskit-styles.js CHANGED
@@ -1,4 +1,4 @@
1
- // GlassKit v1.3.1 – Constructable Stylesheet
1
+ // GlassKit v1.3.3 – Constructable Stylesheet
2
2
  // Auto-generated by build-styles-js.mjs – do not edit manually.
3
3
 
4
4
  const css = "[class*=gl-],[class*=glass-],[class*=glass-]::after,[class*=glass-]::before{box-sizing:border-box}:root,[data-theme=dark]{--gl-color-primary:#f5a623;--gl-color-primary-dark:#d4692a;--gl-color-primary-mid:#e07a24;--gl-color-bg-dark:#0e2530;--gl-color-bg-mid:#1a3d4e;--gl-color-bg-light:#1b3e50;--gl-color-text:#ffffff;--gl-color-text-muted:rgba(255, 255, 255, 0.60);--gl-color-text-on-light:#1a3a4a;--gl-color-text-heading:#ffffff;--gl-color-success:#34c759;--gl-color-error:#ff3b30;--gl-color-warning:#ffcc00;--gl-surface-1:rgba(255, 255, 255, 0.08);--gl-surface-2:rgba(255, 255, 255, 0.10);--gl-surface-3:rgba(255, 255, 255, 0.14);--gl-surface-4:rgba(255, 255, 255, 0.16);--gl-surface-5:rgba(255, 255, 255, 0.22);--gl-surface-milk:rgba(255, 255, 255, 0.55);--gl-surface-milk-strong:rgba(255, 255, 255, 0.75);--gl-surface-overlay:rgba(0, 0, 0, 0.50);--gl-card-glow-top:rgba(255, 255, 255, 0.32);--gl-card-glow-mid:rgba(255, 255, 255, 0.22);--gl-card-glow-low:rgba(255, 255, 255, 0.14);--gl-card-glow-bottom:rgba(255, 255, 255, 0.08);--gl-card-icon-color:rgba(255, 255, 255, 0.8);--gl-card-text-color:rgba(255, 255, 255, 0.7);--gl-border-subtle:rgba(255, 255, 255, 0.18);--gl-border-medium:rgba(255, 255, 255, 0.30);--gl-border-strong:rgba(255, 255, 255, 0.40);--gl-border-milk:rgba(255, 255, 255, 0.60);--gl-border-warm:rgba(255, 200, 100, 0.35);--gl-border-focus:rgba(245, 166, 35, 0.60);--gl-icon-default:rgba(255, 255, 255, 0.6);--gl-icon-muted:rgba(255, 255, 255, 0.45);--gl-icon-strong:rgba(255, 255, 255, 0.8);--gl-icon-on-primary:#ffffff;--gl-icon-on-secondary:#1a3a4a;--gl-icon-on-tertiary:rgba(255, 255, 255, 0.6);--gl-blur:24px;--gl-blur-light:16px;--gl-blur-soft:12px;--gl-blur-heavy:40px;--gl-radius-pill:50%;--gl-radius-full:9999px;--gl-radius-card:24px;--gl-radius-btn:16px;--gl-radius-input:14px;--gl-radius-sm:12px;--gl-radius-xs:8px;--gl-shadow-card:0 8px 32px rgba(0, 0, 0, 0.18);--gl-shadow-btn:0 4px 16px rgba(0, 0, 0, 0.12);--gl-shadow-btn-primary:0 6px 24px rgba(230, 130, 40, 0.35),0 2px 8px rgba(0, 0, 0, 0.15);--gl-shadow-glow:0 2px 12px rgba(255, 255, 255, 0.08),0 4px 16px rgba(0, 0, 0, 0.15);--gl-shadow-modal:0 24px 80px rgba(0, 0, 0, 0.4),0 8px 32px rgba(0, 0, 0, 0.2);--gl-shadow-toast:0 8px 32px rgba(0, 0, 0, 0.25);--gl-shadow-focus:0 0 0 3px rgba(245, 166, 35, 0.3);--gl-inset-subtle:inset 0 1px 1px rgba(255, 255, 255, 0.10);--gl-inset-medium:inset 0 1px 1px rgba(255, 255, 255, 0.15);--gl-inset-strong:inset 0 1px 2px rgba(255, 255, 255, 0.25);--gl-inset-milk:inset 0 1px 2px rgba(255, 255, 255, 0.40);--gl-bg-aurora-1:rgba(60, 160, 160, 0.25);--gl-bg-aurora-2:rgba(200, 140, 60, 0.12);--gl-bg-aurora-3:rgba(80, 180, 200, 0.18);--gl-bg-light-streak-1:rgba(90, 210, 200, 0.14);--gl-bg-light-streak-2:rgba(110, 200, 190, 0.10);--gl-bg-warm-glow:rgba(220, 160, 70, 0.10);--gl-space-2xs:4px;--gl-space-xs:8px;--gl-space-sm:12px;--gl-space-md:16px;--gl-space-lg:20px;--gl-space-xl:24px;--gl-space-2xl:32px;--gl-space-3xl:40px;--gl-space-4xl:56px;--gl-font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;--gl-font-size-xs:13px;--gl-font-size-sm:14px;--gl-font-size-base:15px;--gl-font-size-btn:16px;--gl-font-size-lg:18px;--gl-font-size-title:24px;--gl-font-size-modal:20px;--gl-font-weight-normal:400;--gl-font-weight-medium:500;--gl-font-weight-semibold:600;--gl-transition:all 0.25s ease;--gl-transition-fast:all 0.15s ease;--gl-transition-modal:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--gl-tab-bar-height:82px;--gl-placeholder:rgba(255, 255, 255, 0.35);--gl-accordion-body-color:var(--gl-color-text-muted);--gl-toggle-thumb-bg:linear-gradient(to bottom,\n rgba(255,255,255,0.9) 0%,\n rgba(255,255,255,0.7) 100%);--gl-range-track-bg:var(--gl-surface-2);--gl-range-track-border:var(--gl-border-subtle)}[data-theme=light]{--gl-color-primary:#e8852d;--gl-color-primary-dark:#c96a1e;--gl-color-primary-mid:#d97826;--gl-color-bg-dark:#e8ecf1;--gl-color-bg-mid:#f0f4f8;--gl-color-bg-light:#f5f7fa;--gl-color-text:#1a2a36;--gl-color-text-muted:rgba(26, 42, 54, 0.55);--gl-color-text-on-light:#1a3a4a;--gl-color-text-heading:#0f1f2a;--gl-color-success:#28a745;--gl-color-error:#dc3545;--gl-color-warning:#e6a800;--gl-surface-1:rgba(255, 255, 255, 0.50);--gl-surface-2:rgba(255, 255, 255, 0.60);--gl-surface-3:rgba(255, 255, 255, 0.70);--gl-surface-4:rgba(255, 255, 255, 0.75);--gl-surface-5:rgba(255, 255, 255, 0.85);--gl-surface-milk:rgba(255, 255, 255, 0.85);--gl-surface-milk-strong:rgba(255, 255, 255, 0.92);--gl-surface-overlay:rgba(0, 0, 0, 0.25);--gl-card-glow-top:rgba(255, 255, 255, 0.90);--gl-card-glow-mid:rgba(255, 255, 255, 0.78);--gl-card-glow-low:rgba(255, 255, 255, 0.65);--gl-card-glow-bottom:rgba(255, 255, 255, 0.50);--gl-card-icon-color:rgba(26, 42, 54, 0.5);--gl-card-text-color:rgba(26, 42, 54, 0.6);--gl-border-subtle:rgba(0, 0, 0, 0.08);--gl-border-medium:rgba(0, 0, 0, 0.12);--gl-border-strong:rgba(0, 0, 0, 0.15);--gl-border-milk:rgba(0, 0, 0, 0.10);--gl-border-warm:rgba(232, 133, 45, 0.30);--gl-border-focus:rgba(232, 133, 45, 0.50);--gl-icon-default:rgba(26, 42, 54, 0.50);--gl-icon-muted:rgba(26, 42, 54, 0.35);--gl-icon-strong:rgba(26, 42, 54, 0.70);--gl-icon-on-primary:#ffffff;--gl-icon-on-secondary:#1a3a4a;--gl-icon-on-tertiary:rgba(26, 42, 54, 0.50);--gl-shadow-card:0 4px 20px rgba(0, 0, 0, 0.06);--gl-shadow-btn:0 2px 10px rgba(0, 0, 0, 0.06);--gl-shadow-btn-primary:0 4px 16px rgba(232, 133, 45, 0.25),0 2px 6px rgba(0, 0, 0, 0.08);--gl-shadow-glow:0 2px 8px rgba(0, 0, 0, 0.05),0 4px 12px rgba(0, 0, 0, 0.04);--gl-shadow-modal:0 16px 48px rgba(0, 0, 0, 0.12),0 4px 16px rgba(0, 0, 0, 0.08);--gl-shadow-toast:0 4px 20px rgba(0, 0, 0, 0.10);--gl-shadow-focus:0 0 0 3px rgba(232, 133, 45, 0.25);--gl-inset-subtle:inset 0 1px 1px rgba(255, 255, 255, 0.60);--gl-inset-medium:inset 0 1px 1px rgba(255, 255, 255, 0.70);--gl-inset-strong:inset 0 1px 2px rgba(255, 255, 255, 0.80);--gl-inset-milk:inset 0 1px 2px rgba(255, 255, 255, 0.90);--gl-bg-aurora-1:rgba(100, 200, 220, 0.15);--gl-bg-aurora-2:rgba(240, 180, 100, 0.10);--gl-bg-aurora-3:rgba(120, 200, 230, 0.12);--gl-bg-light-streak-1:rgba(140, 230, 220, 0.10);--gl-bg-light-streak-2:rgba(160, 220, 210, 0.08);--gl-bg-warm-glow:rgba(240, 180, 100, 0.08);--gl-placeholder:rgba(26, 42, 54, 0.30);--gl-accordion-body-color:var(--gl-color-text-muted);--gl-toggle-thumb-bg:linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);--gl-range-track-bg:var(--gl-surface-2);--gl-range-track-border:var(--gl-border-subtle)}.glass-bg{background:radial-gradient(ellipse at 20% 40%,var(--gl-bg-aurora-1) 0,transparent 55%),radial-gradient(ellipse at 80% 65%,var(--gl-bg-aurora-2) 0,transparent 50%),radial-gradient(ellipse at 50% 20%,var(--gl-bg-aurora-3) 0,transparent 50%),linear-gradient(170deg,var(--gl-color-bg-light) 0,var(--gl-color-bg-mid) 50%,var(--gl-color-bg-dark) 100%);position:relative;min-height:100vh;overflow-x:hidden;font-family:var(--gl-font-family);color:var(--gl-color-text);-webkit-font-smoothing:antialiased;transition:background .4s,color .3s}.glass-bg::before{content:'';position:absolute;top:20%;left:-30%;width:160%;height:55%;background:radial-gradient(ellipse at 35% 45%,var(--gl-bg-light-streak-1) 0,transparent 50%),radial-gradient(ellipse at 65% 55%,var(--gl-bg-light-streak-2) 0,transparent 45%);transform:rotate(-8deg);pointer-events:none;z-index:0}.glass-bg::after{content:'';position:absolute;top:40%;right:-20%;width:70%;height:50%;background:radial-gradient(ellipse at center,var(--gl-bg-warm-glow) 0,transparent 65%);pointer-events:none;z-index:0}.glass-bg>*{position:relative;z-index:1}.glass-bg--has-tab-bar{padding-bottom:var(--gl-tab-bar-height)}.glass-nav{display:flex;justify-content:space-between;align-items:center;padding:0 var(--gl-space-xs)}.glass-pill{width:46px;height:46px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--gl-transition);color:var(--gl-color-text);box-shadow:var(--gl-shadow-glow),var(--gl-inset-medium);outline:0;-webkit-tap-highlight-color:transparent}.glass-pill:hover{background:var(--gl-surface-5);transform:scale(1.05)}.glass-pill:active{transform:scale(.95)}.glass-pill svg{width:20px;height:20px;fill:none;stroke:var(--gl-color-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.glass-title{text-align:center;color:var(--gl-color-text-heading);font-size:var(--gl-font-size-title);font-weight:var(--gl-font-weight-semibold);line-height:1.3;text-shadow:0 2px 12px rgba(0,0,0,.15);letter-spacing:-.3px}.glass-card{background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-card);padding:var(--gl-space-3xl) var(--gl-space-xl) var(--gl-space-2xl);box-shadow:var(--gl-shadow-card),var(--gl-inset-strong)}.glass-card--glow{position:relative;overflow:hidden;background:linear-gradient(to bottom,var(--gl-card-glow-top) 0,var(--gl-card-glow-mid) 25%,var(--gl-card-glow-low) 55%,var(--gl-card-glow-bottom) 100%)}.glass-card--glow::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.5) 30%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.5) 70%,transparent 100%);z-index:1}.glass-card__icon{display:flex;align-items:center;justify-content:center;margin:0 auto var(--gl-space-lg)}.glass-card__icon svg{width:64px;height:64px;stroke:var(--gl-card-icon-color);stroke-width:1.2;fill:none}.glass-card__text{color:var(--gl-card-text-color);font-size:var(--gl-font-size-base);font-weight:var(--gl-font-weight-normal);line-height:1.55;text-align:center}.glass-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:none;border-radius:var(--gl-radius-btn);font-family:var(--gl-font-family);font-size:var(--gl-font-size-btn);font-weight:var(--gl-font-weight-semibold);cursor:pointer;transition:var(--gl-transition);outline:0;-webkit-tap-highlight-color:transparent}.glass-btn svg{width:20px;height:20px;flex-shrink:0}.glass-btn--primary{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-mid) 50%,var(--gl-color-primary-dark) 100%);color:#fff;border:1px solid var(--gl-border-warm);box-shadow:var(--gl-shadow-btn-primary),var(--gl-inset-strong)}.glass-btn--primary svg{fill:var(--gl-icon-on-primary);stroke:var(--gl-icon-on-primary);stroke-width:0}.glass-btn--primary:hover{transform:translateY(-1px)}.glass-btn--primary:active{transform:translateY(1px)}.glass-btn--secondary{background:linear-gradient(to bottom,var(--gl-surface-milk-strong) 0,var(--gl-surface-milk) 100%);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-milk);color:var(--gl-color-text-on-light);box-shadow:var(--gl-shadow-btn),var(--gl-inset-milk)}.glass-btn--secondary svg{fill:none;stroke:var(--gl-icon-on-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.glass-btn--secondary:hover{transform:translateY(-1px)}.glass-btn--secondary:active{transform:translateY(1px)}.glass-btn--tertiary{background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1px solid var(--gl-border-subtle);color:var(--gl-color-text-muted);box-shadow:0 4px 12px rgba(0,0,0,.1),var(--gl-inset-subtle)}.glass-btn--tertiary svg{fill:none;stroke:var(--gl-icon-on-tertiary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.glass-btn--tertiary:hover{background:var(--gl-surface-4);color:var(--gl-color-text);transform:translateY(-1px)}.glass-btn--tertiary:active{transform:translateY(1px)}.glass-btn--sm{height:44px;font-size:var(--gl-font-size-sm);border-radius:var(--gl-radius-sm)}.glass-btn--lg{height:64px;font-size:var(--gl-font-size-lg)}.glass-btn--auto{width:auto;padding:0 var(--gl-space-xl)}.glass-status{background:var(--gl-surface-1);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1px solid var(--gl-border-subtle);border-radius:var(--gl-radius-btn);padding:var(--gl-space-md) var(--gl-space-lg);display:flex;align-items:center;gap:var(--gl-space-sm);box-shadow:0 4px 12px rgba(0,0,0,.08),var(--gl-inset-subtle)}.glass-status svg{width:20px;height:20px;flex-shrink:0;stroke:var(--gl-icon-muted);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.glass-status p{color:var(--gl-color-text-muted);font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-normal);line-height:1.45}.glass-input-group{display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-label{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-medium);color:var(--gl-icon-strong);padding-left:var(--gl-space-2xs)}.glass-input{width:100%;height:52px;padding:0 var(--gl-space-md);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-input);color:var(--gl-color-text);font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);transition:var(--gl-transition);outline:0;box-shadow:var(--gl-inset-subtle);-webkit-tap-highlight-color:transparent}.glass-input::placeholder{color:var(--gl-placeholder)}.glass-input:focus{border-color:var(--gl-border-focus);background:var(--gl-surface-3);box-shadow:var(--gl-shadow-focus),var(--gl-inset-medium)}.glass-input:disabled{opacity:.4;cursor:not-allowed}.glass-input--error{border-color:var(--gl-color-error)}.glass-input--error:focus{box-shadow:0 0 0 3px rgba(255,59,48,.25),var(--gl-inset-medium)}.glass-hint{font-size:var(--gl-font-size-xs);color:var(--gl-color-text-muted);padding-left:var(--gl-space-2xs)}.glass-hint--error{color:var(--gl-color-error)}.glass-textarea{width:100%;min-height:120px;padding:var(--gl-space-md);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-input);color:var(--gl-color-text);font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);line-height:1.5;resize:vertical;transition:var(--gl-transition);outline:0;box-shadow:var(--gl-inset-subtle)}.glass-textarea::placeholder{color:var(--gl-placeholder)}.glass-textarea:focus{border-color:var(--gl-border-focus);background:var(--gl-surface-3);box-shadow:var(--gl-shadow-focus),var(--gl-inset-medium)}.glass-select{width:100%;height:52px;padding:0 var(--gl-space-3xl) 0 var(--gl-space-md);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-input);color:var(--gl-color-text);font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);transition:var(--gl-transition);outline:0;box-shadow:var(--gl-inset-subtle);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 16px center}.glass-select:focus{border-color:var(--gl-border-focus);box-shadow:var(--gl-shadow-focus),var(--gl-inset-medium)}.glass-select option{background:var(--gl-color-bg-mid);color:var(--gl-color-text)}.glass-search{position:relative;display:flex;align-items:center}.glass-search__icon{position:absolute;left:var(--gl-space-md);width:18px;height:18px;stroke:var(--gl-icon-muted)!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;fill:none!important;pointer-events:none;z-index:2}.glass-search .glass-input{padding-left:44px;border-radius:var(--gl-radius-full)}.glass-toggle{display:inline-flex;align-items:center;gap:var(--gl-space-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}.glass-toggle__input{position:absolute;opacity:0;width:0;height:0}.glass-toggle__track{position:relative;width:52px;height:30px;background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-full);transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle);flex-shrink:0}.glass-toggle__thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--gl-radius-pill);background:var(--gl-toggle-thumb-bg);box-shadow:0 2px 6px rgba(0,0,0,.2),var(--gl-inset-milk);transition:var(--gl-transition)}.glass-toggle__input:checked+.glass-toggle__track{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border-color:var(--gl-border-warm)}.glass-toggle__input:checked+.glass-toggle__track .glass-toggle__thumb{transform:translateX(22px)}.glass-toggle__input:focus-visible+.glass-toggle__track{box-shadow:var(--gl-shadow-focus)}.glass-toggle__label{font-size:var(--gl-font-size-base);color:var(--gl-color-text);user-select:none}.glass-checkbox{display:inline-flex;align-items:center;gap:var(--gl-space-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}.glass-checkbox__input{position:absolute;opacity:0;width:0;height:0}.glass-checkbox__box{width:24px;height:24px;border-radius:var(--gl-radius-xs);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-medium);display:flex;align-items:center;justify-content:center;transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle);flex-shrink:0}.glass-checkbox__box svg{width:14px;height:14px;stroke:white;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:var(--gl-transition-fast)}.glass-checkbox__input:checked+.glass-checkbox__box{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border-color:var(--gl-border-warm)}.glass-checkbox__input:checked+.glass-checkbox__box svg{opacity:1;transform:scale(1)}.glass-checkbox__input:focus-visible+.glass-checkbox__box{box-shadow:var(--gl-shadow-focus)}.glass-checkbox__label{font-size:var(--gl-font-size-base);color:var(--gl-color-text);user-select:none}.glass-radio{display:inline-flex;align-items:center;gap:var(--gl-space-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}.glass-radio__input{position:absolute;opacity:0;width:0;height:0}.glass-radio__circle{width:24px;height:24px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-medium);display:flex;align-items:center;justify-content:center;transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle);flex-shrink:0}.glass-radio__dot{width:10px;height:10px;border-radius:var(--gl-radius-pill);background:#fff;opacity:0;transform:scale(0);transition:var(--gl-transition-fast)}.glass-radio__input:checked+.glass-radio__circle{background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border-color:var(--gl-border-warm)}.glass-radio__input:checked+.glass-radio__circle .glass-radio__dot{opacity:1;transform:scale(1)}.glass-radio__input:focus-visible+.glass-radio__circle{box-shadow:var(--gl-shadow-focus)}.glass-radio__label{font-size:var(--gl-font-size-base);color:var(--gl-color-text);user-select:none}.glass-range-group{display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-range-header{display:flex;justify-content:space-between;align-items:baseline}.glass-range-value{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-primary);font-variant-numeric:tabular-nums}.glass-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--gl-radius-full);background:var(--gl-range-track-bg);border:1px solid var(--gl-range-track-border);outline:0;cursor:pointer}.glass-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:var(--gl-radius-pill);background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(230,130,40,.35),var(--gl-inset-strong);margin-top:-10px;cursor:pointer;transition:var(--gl-transition)}.glass-range::-webkit-slider-thumb:hover{transform:scale(1.1)}.glass-range::-moz-range-thumb{width:26px;height:26px;border-radius:var(--gl-radius-pill);background:linear-gradient(135deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(230,130,40,.35);cursor:pointer}.glass-range::-moz-range-track{height:6px;border-radius:var(--gl-radius-full);background:var(--gl-range-track-bg);border:1px solid var(--gl-range-track-border)}.glass-range:focus-visible{box-shadow:var(--gl-shadow-focus)}.glass-progress{width:100%;display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-progress__header{display:flex;justify-content:space-between;align-items:baseline}.glass-progress__label{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-medium);color:var(--gl-icon-strong)}.glass-progress__value{font-size:var(--gl-font-size-xs);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text-muted);font-variant-numeric:tabular-nums}.glass-progress__track{width:100%;height:8px;border-radius:var(--gl-radius-full);background:var(--gl-surface-2);border:1px solid var(--gl-border-subtle);overflow:hidden;box-shadow:var(--gl-inset-subtle)}.glass-progress__fill{height:100%;border-radius:var(--gl-radius-full);background:linear-gradient(90deg,var(--gl-color-primary) 0,var(--gl-color-primary-dark) 100%);box-shadow:0 0 8px rgba(245,166,35,.3),var(--gl-inset-strong);transition:width .5s cubic-bezier(.4, 0, .2, 1);position:relative}.glass-progress__fill::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;border-radius:var(--gl-radius-full);background:linear-gradient(to bottom,rgba(255,255,255,.3) 0,transparent 100%)}.glass-progress--sm .glass-progress__track{height:4px}.glass-progress--lg .glass-progress__track{height:12px}.glass-progress--success .glass-progress__fill{background:linear-gradient(90deg,#34c759 0,#2da44e 100%);box-shadow:0 0 8px rgba(52,199,89,.3),var(--gl-inset-strong)}.glass-progress--error .glass-progress__fill{background:linear-gradient(90deg,#ff3b30 0,#d63027 100%);box-shadow:0 0 8px rgba(255,59,48,.3),var(--gl-inset-strong)}.glass-modal-overlay{position:fixed;inset:0;background:var(--gl-surface-overlay);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));display:flex;align-items:center;justify-content:center;padding:var(--gl-space-lg);z-index:1000;opacity:0;pointer-events:none;transition:var(--gl-transition-modal);font-family:var(--gl-font-family);-webkit-font-smoothing:antialiased}.glass-modal-overlay.is-active{opacity:1;pointer-events:auto}.glass-modal{width:100%;max-width:340px;background:linear-gradient(to bottom,var(--gl-card-glow-top) 0,var(--gl-card-glow-bottom) 100%);backdrop-filter:blur(var(--gl-blur-heavy));-webkit-backdrop-filter:blur(var(--gl-blur-heavy));border:1.5px solid var(--gl-border-medium);border-radius:var(--gl-radius-card);overflow:hidden;box-shadow:var(--gl-shadow-modal);transform:scale(.9) translateY(20px);transition:var(--gl-transition-modal);position:relative}.glass-modal-overlay.is-active .glass-modal{transform:scale(1) translateY(0)}.glass-modal::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.4) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.4) 70%,transparent 100%)}.glass-modal__header{padding:var(--gl-space-xl) var(--gl-space-xl) var(--gl-space-sm);text-align:center}.glass-modal__title{font-size:var(--gl-font-size-modal);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text)}.glass-modal__body{padding:var(--gl-space-sm) var(--gl-space-xl) var(--gl-space-xl);text-align:center}.glass-modal__body p{color:var(--gl-color-text-muted);font-size:var(--gl-font-size-base);line-height:1.55}.glass-modal__footer{display:flex;border-top:1px solid var(--gl-border-subtle)}.glass-modal__action{flex:1;height:52px;background:0 0;border:none;font-family:var(--gl-font-family);font-size:var(--gl-font-size-btn);font-weight:var(--gl-font-weight-medium);color:var(--gl-color-text-muted);cursor:pointer;transition:var(--gl-transition-fast);outline:0}.glass-modal__action:hover{background:var(--gl-surface-1)}.glass-modal__action+.glass-modal__action{border-left:1px solid var(--gl-border-subtle)}.glass-modal__action--primary{color:var(--gl-color-primary);font-weight:var(--gl-font-weight-semibold)}.glass-modal__action--danger{color:var(--gl-color-error);font-weight:var(--gl-font-weight-semibold)}.glass-toast{position:fixed;top:var(--gl-space-4xl);left:50%;transform:translateX(-50%) translateY(-20px);min-width:280px;max-width:340px;padding:var(--gl-space-md) var(--gl-space-lg);background:linear-gradient(to bottom,var(--gl-surface-4) 0,var(--gl-surface-2) 100%);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1px solid var(--gl-border-medium);border-radius:var(--gl-radius-btn);display:flex;align-items:center;gap:var(--gl-space-sm);box-shadow:var(--gl-shadow-toast),var(--gl-inset-medium);z-index:1100;opacity:0;pointer-events:none;transition:var(--gl-transition-modal);font-family:var(--gl-font-family);-webkit-font-smoothing:antialiased}.glass-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}.glass-toast__icon{width:22px;height:22px;flex-shrink:0;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.glass-toast--success .glass-toast__icon{stroke:var(--gl-color-success)}.glass-toast--error .glass-toast__icon{stroke:var(--gl-color-error)}.glass-toast--warning .glass-toast__icon{stroke:var(--gl-color-warning)}.glass-toast__text{font-size:var(--gl-font-size-sm);font-weight:var(--gl-font-weight-medium);color:var(--gl-color-text);line-height:1.4}.glass-tab-bar{position:fixed;bottom:0;left:0;right:0;height:var(--gl-tab-bar-height);background:linear-gradient(to bottom,var(--gl-surface-3) 0,var(--gl-surface-1) 100%);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border-top:1px solid var(--gl-border-subtle);display:flex;justify-content:space-around;align-items:flex-start;padding-top:var(--gl-space-xs);padding-bottom:env(safe-area-inset-bottom,8px);z-index:900;box-shadow:0 -4px 20px rgba(0,0,0,.08),var(--gl-inset-subtle)}.glass-tab-bar__item{display:flex;flex-direction:column;align-items:center;gap:var(--gl-space-2xs);padding:var(--gl-space-2xs) var(--gl-space-sm);background:0 0;border:none;cursor:pointer;transition:var(--gl-transition);outline:0;-webkit-tap-highlight-color:transparent;min-width:60px}.glass-tab-bar__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;position:relative}.glass-tab-bar__icon svg{width:24px;height:24px;fill:none;stroke:var(--gl-icon-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:var(--gl-transition)}.glass-tab-bar__label{font-size:10px;font-weight:var(--gl-font-weight-medium);color:var(--gl-icon-muted);transition:var(--gl-transition);letter-spacing:.2px}.glass-tab-bar__item.is-active .glass-tab-bar__icon svg{stroke:var(--gl-color-primary);filter:drop-shadow(0 0 6px rgba(245,166,35,.35))}.glass-tab-bar__item.is-active .glass-tab-bar__label{color:var(--gl-color-primary)}.glass-tab-bar__item.is-active .glass-tab-bar__icon::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:var(--gl-radius-pill);background:var(--gl-color-primary);box-shadow:0 0 6px rgba(245,166,35,.5)}.glass-tab-bar__item:not(.is-active):hover .glass-tab-bar__icon svg{stroke:var(--gl-icon-default)}.glass-tab-bar__item:not(.is-active):hover .glass-tab-bar__label{color:var(--gl-icon-default)}.glass-tab-bar__badge{position:absolute;top:-4px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--gl-radius-full);background:var(--gl-color-error);color:#fff;font-size:10px;font-weight:var(--gl-font-weight-semibold);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(255,59,48,.4)}.glass-accordion{display:flex;flex-direction:column;gap:var(--gl-space-xs)}.glass-accordion__item{background:var(--gl-surface-2);backdrop-filter:blur(var(--gl-blur-light));-webkit-backdrop-filter:blur(var(--gl-blur-light));border:1px solid var(--gl-border-subtle);border-radius:var(--gl-radius-btn);overflow:hidden;transition:var(--gl-transition);box-shadow:var(--gl-inset-subtle)}.glass-accordion__item.is-open{background:var(--gl-surface-3);border-color:var(--gl-border-medium);box-shadow:0 4px 16px rgba(0,0,0,.1),var(--gl-inset-medium)}.glass-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--gl-space-sm);padding:var(--gl-space-md) var(--gl-space-lg);background:0 0;border:none;cursor:pointer;font-family:var(--gl-font-family);font-size:var(--gl-font-size-base);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text);text-align:left;outline:0;transition:var(--gl-transition);-webkit-tap-highlight-color:transparent}.glass-accordion__trigger:hover{color:var(--gl-color-primary)}.glass-accordion__trigger-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.glass-accordion__trigger-icon svg{width:18px;height:18px;fill:none;stroke:var(--gl-icon-default);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.glass-accordion__item.is-open .glass-accordion__trigger-icon svg{transform:rotate(180deg);stroke:var(--gl-color-primary)}.glass-accordion__content{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4, 0, .2, 1)}.glass-accordion__item.is-open .glass-accordion__content{max-height:500px}.glass-accordion__body{padding:0 var(--gl-space-lg) var(--gl-space-lg);color:var(--gl-accordion-body-color);font-size:var(--gl-font-size-sm);line-height:1.6}.glass-badge{display:inline-flex;align-items:center;gap:var(--gl-space-2xs);padding:var(--gl-space-2xs) var(--gl-space-sm);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1px solid var(--gl-border-subtle);border-radius:var(--gl-radius-full);font-size:var(--gl-font-size-xs);font-weight:var(--gl-font-weight-medium);color:var(--gl-color-text);box-shadow:var(--gl-inset-subtle)}.glass-badge--primary{background:linear-gradient(135deg,rgba(245,166,35,.25) 0,rgba(212,105,42,.2) 100%);border-color:var(--gl-border-warm);color:var(--gl-color-primary)}.glass-badge--success{background:rgba(52,199,89,.15);border-color:rgba(52,199,89,.3);color:var(--gl-color-success)}.glass-badge--error{background:rgba(255,59,48,.15);border-color:rgba(255,59,48,.3);color:var(--gl-color-error)}.glass-divider{height:1px;border:none;background:linear-gradient(90deg,transparent 0,var(--gl-border-subtle) 20%,var(--gl-border-medium) 50%,var(--gl-border-subtle) 80%,transparent 100%)}.glass-avatar{width:44px;height:44px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur-soft));-webkit-backdrop-filter:blur(var(--gl-blur-soft));border:1.5px solid var(--gl-border-strong);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--gl-shadow-glow),var(--gl-inset-medium);flex-shrink:0;font-size:var(--gl-font-size-btn);font-weight:var(--gl-font-weight-semibold);color:var(--gl-color-text)}.glass-avatar img{width:100%;height:100%;object-fit:cover}.glass-avatar--sm{width:32px;height:32px;font-size:var(--gl-font-size-xs)}.glass-avatar--lg{width:56px;height:56px;font-size:var(--gl-font-size-lg)}.glass-theme-toggle{width:46px;height:46px;border-radius:var(--gl-radius-pill);background:var(--gl-surface-3);backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));border:1.5px solid var(--gl-border-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--gl-transition);box-shadow:var(--gl-shadow-glow),var(--gl-inset-medium);outline:0;-webkit-tap-highlight-color:transparent}.glass-theme-toggle:hover{background:var(--gl-surface-5);transform:scale(1.05)}.glass-theme-toggle:active{transform:scale(.95)}.glass-theme-toggle svg{width:20px;height:20px;fill:none;stroke:var(--gl-color-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.glass-theme-toggle .icon-sun{display:none}.glass-theme-toggle .icon-moon,[data-theme=light] .glass-theme-toggle .icon-sun{display:block}[data-theme=light] .glass-theme-toggle .icon-moon{display:none}.gl-stack{display:flex;flex-direction:column}.gl-row{display:flex;flex-direction:row;align-items:center}.gl-stack--2xs{gap:var(--gl-space-2xs)}.gl-stack--xs{gap:var(--gl-space-xs)}.gl-stack--sm{gap:var(--gl-space-sm)}.gl-stack--md{gap:var(--gl-space-md)}.gl-stack--lg{gap:var(--gl-space-lg)}.gl-stack--xl{gap:var(--gl-space-xl)}.gl-row--xs{gap:var(--gl-space-xs)}.gl-row--sm{gap:var(--gl-space-sm)}.gl-row--md{gap:var(--gl-space-md)}.gl-text-center{text-align:center}.gl-text-muted{color:var(--gl-color-text-muted)}.gl-text-sm{font-size:var(--gl-font-size-sm)}.gl-mt-sm{margin-top:var(--gl-space-sm)}.gl-mt-md{margin-top:var(--gl-space-md)}.gl-mt-lg{margin-top:var(--gl-space-lg)}.gl-mt-xl{margin-top:var(--gl-space-xl)}.gl-mb-sm{margin-bottom:var(--gl-space-sm)}.gl-mb-md{margin-bottom:var(--gl-space-md)}.gl-mb-lg{margin-bottom:var(--gl-space-lg)}.gl-mb-xl{margin-bottom:var(--gl-space-xl)}.gl-px{padding-left:var(--gl-space-lg);padding-right:var(--gl-space-lg)}.gl-w-full{width:100%}.gl-flex-1{flex:1}\n/*# sourceMappingURL=glasskit.min.css.map */";
package/glasskit.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* ============================================================
2
2
  GLASSKIT COMPONENT LIBRARY
3
- Jungherz GmbH – v1.3
3
+ Jungherz GmbH – v1.3.3
4
4
 
5
5
  Features:
6
6
  - Scoped Reset (box-sizing Fix)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jungherz-de/glasskit",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
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",
@@ -37,7 +37,7 @@
37
37
  "type": "git",
38
38
  "url": "git+https://github.com/JUNGHERZ/GlassKit.git"
39
39
  },
40
- "homepage": "https://github.com/JUNGHERZ/GlassKit",
40
+ "homepage": "https://glasskit.jungherz.com",
41
41
  "bugs": {
42
42
  "url": "https://github.com/JUNGHERZ/GlassKit/issues"
43
43
  },