@jungherz-de/glasskit 1.3.2 → 1.3.4

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 +121 -92
  2. package/README.md +186 -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,20 +7,49 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
8
  ---
9
9
 
10
+ ## [1.3.4] – 2026-03-29
11
+
12
+ ### Added
13
+
14
+ - **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)
15
+ - **Visual preview for Toast** in `docs.html` and `de/docs.html` – static success toast rendered inline
16
+ - **HTML code example for Status Notice** in `docs.html` and `de/docs.html` – was previously preview-only without code snippet
17
+
18
+ ### Changed
19
+
20
+ - Version references updated to 1.3.4 across all files
21
+
22
+ ---
23
+
24
+ ## [1.3.3] – 2026-03-21
25
+
26
+ ### Added
27
+
28
+ - **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
29
+ - **German translations** (`de/` directory) – full German versions of `index.html`, `docs.html`, and `showcase.html` with correct relative asset paths
30
+
31
+ ### Changed
32
+
33
+ - **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
34
+ - README screenshot now links to [glasskit.jungherz.com](https://glasskit.jungherz.com)
35
+ - Version references updated to 1.3.3 across all files
36
+
37
+ ---
38
+
10
39
  ## [1.3.2] – 2026-03-21
11
40
 
12
41
  ### Added
13
42
 
14
- - **Background Switcher** in `showcase.html` – interaktiver Hintergrund-Wechsler mit 6 Farbpresets (Default, Ocean, Sunset, Forest, Rose, Monochrome), um die Glassmorphism-Effekte auf verschiedenen Hintergründen zu testen
15
- - Jedes Preset hat eigene Farbwerte für Dark und Light Mode
16
- - Reine CSS-Gradienten, keine externen Bilder
17
- - Popover-UI mit animierten Farbkreisen (Swatches), konsistent im GlassKit-Stil
18
- - Überschreibt ausschließlich Custom Properties via `data-bg`-Attribut – keine Änderungen an `glasskit.css`
43
+ - **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
44
+ - Each preset has its own color values for Dark and Light Mode
45
+ - Pure CSS gradients, no external images
46
+ - Popover UI with animated color swatches, consistent with GlassKit styling
47
+ - Overrides only Custom Properties via `data-bg` attribute – no changes to `glasskit.css`
19
48
 
20
49
  ### Changed
21
50
 
22
- - Footer in `index.html` aktualisiert: „Gebaut von Jungherz mit 🧊 und viel ❤️ zum Detail.“
23
- - Versionsangaben in allen Dateien auf 1.3.2 aktualisiert (`package.json`, `glasskit.css`, `README.md`, `index.html`, `showcase.html`)
51
+ - Footer in `index.html` updated: "Built by Jungherz with 🧊 and lots of ❤️ for detail."
52
+ - Version references updated to 1.3.2 across all files (`package.json`, `glasskit.css`, `README.md`, `index.html`, `showcase.html`)
24
53
 
25
54
  ---
26
55
 
@@ -28,9 +57,9 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
28
57
 
29
58
  ### Fixed
30
59
 
31
- - Intro-Screenshot: PNG durch optimiertes JPEG ersetzt (1.3 MB → 287 KB)
32
- - README-Bild: absolute GitHub-URL für korrekte Anzeige auf npmjs.com
33
- - Release-Pipeline: Tag-Push triggert jetzt automatisch Release + Build + npm Publish (kein manuelles Release mehr nötig)
60
+ - Intro screenshot: PNG replaced with optimized JPEG (1.3 MB → 287 KB)
61
+ - README image: absolute GitHub URL for correct display on npmjs.com
62
+ - Release pipeline: tag push now automatically triggers Release + Build + npm Publish (no manual release needed)
34
63
 
35
64
  ---
36
65
 
@@ -38,43 +67,42 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
38
67
 
39
68
  ### 🎉 Initial Public Release
40
69
 
41
- GlassKit entstand aus einem konkreten Kundenprojekt (MeineFinanzCloud /
42
- Jungherz GmbH) und wurde im Laufe des Projekts zu einer vollständigen,
43
- wiederverwendbaren Komponentenbibliothek ausgebaut. Version 1.3 ist die
44
- erste öffentliche Veröffentlichung als Open-Source-Projekt.
70
+ GlassKit originated from a real client project (MeineFinanzCloud /
71
+ Jungherz GmbH) and evolved into a complete, reusable component library
72
+ during development. Version 1.3 is the first public open-source release.
45
73
 
46
74
  ---
47
75
 
48
76
  ### Added
49
77
 
50
- #### Kern-Library (`glasskit.css`)
51
- - **Design Tokens** – vollständiges System aus CSS Custom Properties
78
+ #### Core Library (`glasskit.css`)
79
+ - **Design Tokens** – complete system of CSS Custom Properties
52
80
  (`--gl-color-*`, `--gl-surface-*`, `--gl-border-*`, `--gl-blur-*`,
53
81
  `--gl-radius-*`, `--gl-shadow-*`, `--gl-space-*`, `--gl-font-*`)
54
- - **Scoped Reset** – `box-sizing: border-box` für alle `[class*="glass-"]`
55
- Elemente, verhindert Layout-Konflikte mit bestehenden Projekten
56
- - **Dark Mode** (Standard) via `:root` / `[data-theme="dark"]`
57
- - **Light Mode** via `[data-theme="light"]` – vollständig eigene Token-Werte
82
+ - **Scoped Reset** – `box-sizing: border-box` for all `[class*="glass-"]`
83
+ elements, prevents layout conflicts with existing projects
84
+ - **Dark Mode** (default) via `:root` / `[data-theme="dark"]`
85
+ - **Light Mode** via `[data-theme="light"]` – fully separate token values
58
86
 
59
- #### Komponenten (22 gesamt)
87
+ #### Components (22 total)
60
88
 
61
- | # | Komponente | Klasse |
89
+ | # | Component | Class |
62
90
  |---|---|---|
63
- | 1 | Hintergrund | `.glass-bg` |
91
+ | 1 | Background | `.glass-bg` |
64
92
  | 2 | Navigation Bar | `.glass-nav` |
65
- | 3 | Pill-Button | `.glass-pill` |
66
- | 4 | Tab-Bar | `.glass-tab-bar` |
67
- | 5 | Seitentitel | `.glass-title` |
93
+ | 3 | Pill Button | `.glass-pill` |
94
+ | 4 | Tab Bar | `.glass-tab-bar` |
95
+ | 5 | Page Title | `.glass-title` |
68
96
  | 6 | Card | `.glass-card` |
69
97
  | 7 | Button | `.glass-btn` |
70
98
  | 8 | Badge | `.glass-badge` |
71
99
  | 9 | Avatar | `.glass-avatar` |
72
100
  | 10 | Divider | `.glass-divider` |
73
- | 11 | Status-Hinweis | `.glass-status` |
101
+ | 11 | Status Notice | `.glass-status` |
74
102
  | 12 | Input | `.glass-input` |
75
103
  | 13 | Textarea | `.glass-textarea` |
76
104
  | 14 | Select | `.glass-select` |
77
- | 15 | Suchfeld | `.glass-search` |
105
+ | 15 | Search | `.glass-search` |
78
106
  | 16 | Toggle Switch | `.glass-toggle` |
79
107
  | 17 | Checkbox | `.glass-checkbox` |
80
108
  | 18 | Radio Button | `.glass-radio` |
@@ -83,80 +111,79 @@ erste öffentliche Veröffentlichung als Open-Source-Projekt.
83
111
  | 21 | Modal | `.glass-modal` |
84
112
  | 22 | Toast | `.glass-toast` |
85
113
 
86
- #### Modifier & States
87
- - Button-Varianten: `--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`
88
- - Card-Variante: `--glow` (Hell→Milchig-Verlauf mit Lichtstreifen)
89
- - Progress-Varianten: `--sm`, `--lg`, `--success`, `--error`
90
- - Badge-Varianten: `--primary`, `--success`, `--error`
91
- - Avatar-Größen: `--sm`, `--lg`
92
- - Toast-Varianten: `--success`, `--error`, `--warning`
93
- - Modal-Actions: `--primary`, `--danger`
94
- - Interaktive States: `.is-active`, `.is-open`, `.is-visible`
95
-
96
- #### Utility-Klassen
97
- - Layout: `.gl-stack`, `.gl-row` (je mit Gap-Varianten `--xs` bis `--xl`)
114
+ #### Modifiers & States
115
+ - Button variants: `--primary`, `--secondary`, `--tertiary`, `--sm`, `--lg`, `--auto`
116
+ - Card variant: `--glow` (light-to-milky gradient with light streak)
117
+ - Progress variants: `--sm`, `--lg`, `--success`, `--error`
118
+ - Badge variants: `--primary`, `--success`, `--error`
119
+ - Avatar sizes: `--sm`, `--lg`
120
+ - Toast variants: `--success`, `--error`, `--warning`
121
+ - Modal actions: `--primary`, `--danger`
122
+ - Interactive states: `.is-active`, `.is-open`, `.is-visible`
123
+
124
+ #### Utility Classes
125
+ - Layout: `.gl-stack`, `.gl-row` (each with gap variants `--xs` to `--xl`)
98
126
  - Spacing: `.gl-mt-*`, `.gl-mb-*`, `.gl-px`
99
127
  - Text: `.gl-text-center`, `.gl-text-muted`, `.gl-text-sm`
100
- - Sonstige: `.gl-w-full`, `.gl-flex-1`
128
+ - Other: `.gl-w-full`, `.gl-flex-1`
101
129
 
102
- #### Dateien
103
- - `glasskit.css` – Kern-Library
104
- - `glasskit.min.css` – Minifizierte Version (auto-generated bei Release)
105
- - `glasskit-styles.js` – Constructable Stylesheet für Shadow DOM (auto-generated)
106
- - `theme-override.css` – Template für eigene Themes (4 Beispiel-Themes:
130
+ #### Files
131
+ - `glasskit.css` – Core library
132
+ - `glasskit.min.css` – Minified version (auto-generated on release)
133
+ - `glasskit-styles.js` – Constructable Stylesheet for Shadow DOM (auto-generated)
134
+ - `theme-override.css` – Template for custom themes (4 example themes:
107
135
  Ocean Blue, Emerald Green, Rose, Custom)
108
- - `build-styles-js.mjs` – Build-Script für glasskit-styles.js
109
- - `package.json` – npm-Paketdefinition
110
- - `index.html` – Landingpage mit iPhone-Wireframe & eingebettetem Showcase
111
- - `showcase.html` – Interaktiver Showcase aller 22 Komponenten
112
- - `docs.html` – Vollständige Dokumentation mit Live-Previews,
113
- Code-Blocks und Klassen-Tabellen
114
- - `README.md` – Projektdokumentation
115
- - `CHANGELOG.md` – Diese Datei
136
+ - `build-styles-js.mjs` – Build script for glasskit-styles.js
137
+ - `package.json` – npm package definition
138
+ - `index.html` – Landing page with iPhone wireframe & embedded showcase
139
+ - `showcase.html` – Interactive showcase of all 22 components
140
+ - `docs.html` – Full documentation with live previews,
141
+ code blocks, and class tables
142
+ - `README.md` – Project documentation
143
+ - `CHANGELOG.md` – This file
116
144
  - `LICENSE` – MIT License
117
145
 
118
146
  #### Build & Distribution
119
- - **GitHub Actions Release Pipeline** – automatische Minifizierung,
120
- Constructable Stylesheet Generierung und npm-Veröffentlichung bei
121
- jedem GitHub Release
122
- - **npm-Paket** `@jungherz-de/glasskit` – installierbar via npm, yarn, pnpm
123
- - **CDN-Verfügbarkeit** – sofort über jsDelivr und unpkg nutzbar
124
- - **Shadow-DOM-Support** – `glasskit-styles.js` exportiert ein fertiges
125
- Constructable Stylesheet für Web Components (Vanilla, Hybrids, Lit etc.)
147
+ - **GitHub Actions Release Pipeline** – automatic minification,
148
+ Constructable Stylesheet generation, and npm publishing on
149
+ every GitHub Release
150
+ - **npm package** `@jungherz-de/glasskit` – installable via npm, yarn, pnpm
151
+ - **CDN availability** – immediately available via jsDelivr and unpkg
152
+ - **Shadow DOM support** – `glasskit-styles.js` exports a ready-made
153
+ Constructable Stylesheet for Web Components (Vanilla, Hybrids, Lit, etc.)
126
154
 
127
155
  ---
128
156
 
129
157
  ### Fixed
130
158
 
131
- - `box-sizing: border-box` fehlte bei `.glass-input` und `.glass-textarea`,
132
- was bei bestimmten Projekten dazu führte, dass sich Felder über den
133
- Bildschirmrand hinaus ausdehnten → durch Scoped Reset global gelöst
134
- - Suchfeld-Icon (`.glass-search__icon`) war in einigen Browsern nicht
135
- sichtbar → `!important` auf `stroke`, `fill`, `stroke-width` gesetzt
136
- sowie `z-index: 2` ergänzt
137
- - Button-Icons fehlten im Showcase → SVGs zurück in alle Buttons eingefügt,
138
- Icon-Farben konsistent über `--gl-icon-*` Tokens gesteuert
139
- - Modal und Toast lagen außerhalb von `.glass-bg` und erbten dadurch keine
140
- `font-family` → `font-family: var(--gl-font-family)` direkt auf
141
- `.glass-modal-overlay` und `.glass-toast` gesetzt
142
- - iPhone-Frame: iFrame-Inhalt schien beim Scrollen an den abgerundeten Ecken
143
- durch → Fix via `isolation: isolate`, `-webkit-mask-image` und
144
- `transform: translateZ(0)` auf `.phone-frame`
159
+ - `box-sizing: border-box` was missing on `.glass-input` and `.glass-textarea`,
160
+ which caused fields to extend beyond the screen edge in certain projects
161
+ → resolved globally via Scoped Reset
162
+ - Search icon (`.glass-search__icon`) was not visible in some browsers
163
+ → added `!important` on `stroke`, `fill`, `stroke-width` and `z-index: 2`
164
+ - Button icons were missing in the showcase → SVGs re-added to all buttons,
165
+ icon colors consistently controlled via `--gl-icon-*` tokens
166
+ - Modal and Toast were placed outside `.glass-bg` and therefore did not inherit
167
+ `font-family` → `font-family: var(--gl-font-family)` set directly on
168
+ `.glass-modal-overlay` and `.glass-toast`
169
+ - iPhone frame: iframe content was showing through rounded corners on scroll
170
+ → fixed via `isolation: isolate`, `-webkit-mask-image`, and
171
+ `transform: translateZ(0)` on `.phone-frame`
145
172
 
146
173
  ---
147
174
 
148
175
  ### Design Decisions
149
176
 
150
- - **Glassmorphism inspiriert von iOS 26 Liquid Glass** – Apple hat mit iOS 26
151
- das Glasdesign grundlegend neu definiert. GlassKit übersetzt diesen Look
152
- in reines CSS für Web und App.
153
- - **Keine JavaScript-Abhängigkeiten** – Alle Animationen und Übergänge
154
- laufen rein über CSS Transitions. Nur Modal, Toast und Accordion benötigen
155
- minimales `classList.toggle()` ohne Framework.
156
- - **BEM-artige Namenskonvention** – `glass-*` Prefix verhindert Konflikte
157
- mit bestehendem CSS im Zielprojekt.
158
- - **Token-First** – Jeder visuelle Wert ist ein Token. Theming erfordert
159
- keine Änderungen an der Kern-Library.
177
+ - **Glassmorphism inspired by iOS 26 Liquid Glass** – Apple fundamentally
178
+ redefined glass design with iOS 26. GlassKit translates this look
179
+ into pure CSS for web and apps.
180
+ - **No JavaScript dependencies** – All animations and transitions
181
+ run purely via CSS Transitions. Only Modal, Toast, and Accordion require
182
+ minimal `classList.toggle()` without any framework.
183
+ - **BEM-like naming convention** – `glass-*` prefix prevents conflicts
184
+ with existing CSS in the target project.
185
+ - **Token-first** – Every visual value is a token. Theming requires
186
+ no changes to the core library.
160
187
 
161
188
  ---
162
189
 
@@ -165,22 +192,24 @@ erste öffentliche Veröffentlichung als Open-Source-Projekt.
165
192
  - Repository: [github.com/JUNGHERZ/GlassKit](https://github.com/JUNGHERZ/GlassKit)
166
193
  - npm: [@jungherz-de/glasskit](https://www.npmjs.com/package/@jungherz-de/glasskit)
167
194
  - CDN: [cdn.jsdelivr.net/npm/@jungherz-de/glasskit](https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/)
168
- - Lizenz: MIT
169
- - Entwickelt von: [Jungherz GmbH](https://www.jungherz.com)
195
+ - License: MIT
196
+ - Developed by: [Jungherz GmbH](https://www.jungherz.com)
170
197
 
171
198
  ---
172
199
 
173
200
  ## [Unreleased]
174
201
 
175
- > Geplante Erweiterungen für kommende Versionen:
202
+ > Planned additions for future versions:
176
203
 
177
- - [ ] Weitere Themes (Purple, Midnight, Sand)
178
- - [ ] Animierte Hintergründe (Aurora-Motion)
179
- - [ ] Figma-Komponentenset
204
+ - [ ] Additional themes (Purple, Midnight, Sand)
205
+ - [ ] Animated backgrounds (Aurora Motion)
206
+ - [ ] Figma component set
180
207
 
181
208
  ---
182
209
 
210
+ [1.3.4]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.4
211
+ [1.3.3]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.3
183
212
  [1.3.2]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.2
184
213
  [1.3.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.1
185
214
  [1.3.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.3.0
186
- [Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.2...HEAD
215
+ [Unreleased]: https://github.com/JUNGHERZ/GlassKit/compare/v1.3.4...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.2-orange?style=flat-square" alt="Version">
2
+ <img src="https://img.shields.io/badge/version-1.3.4-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.2-f5a623?style=flat-square" alt="Changelog"></a>
6
+ <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.4-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,122 @@ 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
446
+
447
+ Live pages:
448
+ - 🌐 Home: https://glasskit.jungherz.com/
449
+ - 📖 Docs: https://glasskit.jungherz.com/docs.html
450
+ - 🧪 Showcase: https://glasskit.jungherz.com/showcase.html
451
+
452
+ ## 🧩 Companion Project: GlassKit Elements
453
+
454
+ If you want to use GlassKit through **drop-in Web Components** instead of writing the full HTML structure yourself, take a look at **GlassKit Elements**.
455
+
456
+ GlassKit Elements builds on top of GlassKit CSS and provides a set of vanilla JavaScript custom elements like `glk-button`, `glk-card`, or `glk-input`.
457
+
458
+ Useful links:
459
+ - GitHub: https://github.com/JUNGHERZ/GlassKit-Elements
460
+ - Live Demo: https://glasskit-elements.jungherz.com/
461
+ - Docs: https://glasskit-elements.jungherz.com/docs.html
445
462
 
446
463
  ---
447
464
 
448
- ## 🌐 Browser-Kompatibilität
465
+ ## 🌐 Browser Compatibility
449
466
 
450
- GlassKit nutzt `backdrop-filter` für die Glaseffekte. Support:
467
+ GlassKit uses `backdrop-filter` for glass effects. Support:
451
468
 
452
469
  | Browser | Support |
453
470
  |---|---|
454
- | Safari (iOS/macOS) | ✅ Voll |
455
- | Chrome / Edge | ✅ Voll |
456
- | Firefox | ✅ Ab Version 103 |
457
- | Samsung Internet | ✅ Voll |
471
+ | Safari (iOS/macOS) | ✅ Full |
472
+ | Chrome / Edge | ✅ Full |
473
+ | Firefox | ✅ From version 103 |
474
+ | Samsung Internet | ✅ Full |
458
475
 
459
- > **Hinweis:** In Browsern ohne `backdrop-filter`-Support werden die Elemente mit den definierten Hintergrundfarben dargestellt – die UI bleibt nutzbar, nur ohne Blur-Effekt.
476
+ > **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
477
 
461
478
  ---
462
479
 
463
- ## 📋 States & Modifier – Cheat Sheet
480
+ ## 📋 States & Modifiers – Cheat Sheet
464
481
 
465
482
  ```
466
- Interaktive States:
467
- .is-active → Tab-Bar Item, Modal Overlay
468
- .is-open → Accordion Item
483
+ Interactive States:
484
+ .is-active → Tab Bar item, Modal Overlay
485
+ .is-open → Accordion item
469
486
  .is-visible → Toast
470
487
  :checked → Toggle, Checkbox, Radio
471
488
  :focus → Input, Textarea, Select, Range
472
489
  :disabled → Input
473
490
 
474
- Button-Modifier:
491
+ Button Modifiers:
475
492
  .glass-btn--primary / --secondary / --tertiary
476
493
  .glass-btn--sm / --lg / --auto
477
494
 
478
- Card-Modifier:
495
+ Card Modifiers:
479
496
  .glass-card--glow
480
497
 
481
- Progress-Modifier:
498
+ Progress Modifiers:
482
499
  .glass-progress--sm / --lg
483
500
  .glass-progress--success / --error
484
501
 
485
- Badge-Modifier:
502
+ Badge Modifiers:
486
503
  .glass-badge--primary / --success / --error
487
504
 
488
- Avatar-Modifier:
505
+ Avatar Modifiers:
489
506
  .glass-avatar--sm / --lg
490
507
 
491
- Toast-Modifier:
508
+ Toast Modifiers:
492
509
  .glass-toast--success / --error / --warning
493
510
 
494
- Modal-Action-Modifier:
511
+ Modal Action Modifiers:
495
512
  .glass-modal__action--primary / --danger
496
513
 
497
- Background-Modifier:
514
+ Background Modifiers:
498
515
  .glass-bg--has-tab-bar
499
516
  ```
500
517
 
@@ -502,43 +519,43 @@ Background-Modifier:
502
519
 
503
520
  ## 🤝 Contributing
504
521
 
505
- Beiträge sind willkommen! So kannst du helfen:
522
+ Contributions are welcome! Here's how you can help:
506
523
 
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**
524
+ 1. **Fork** the repository
525
+ 2. Create a **feature branch** (`git checkout -b feature/my-idea`)
526
+ 3. **Commit** your changes (`git commit -m 'feat: New component XY'`)
527
+ 4. **Push** the branch (`git push origin feature/my-idea`)
528
+ 5. Open a **Pull Request**
512
529
 
513
530
  ### Guidelines
514
531
 
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)
532
+ - Follow the **BEM-like naming convention** (`glass-*` prefix)
533
+ - Use existing **Design Tokens** instead of hard-coded values
534
+ - Make sure new components work in **both Dark and Light Mode**
535
+ - Test on **mobile** (touch targets at least 44px)
519
536
 
520
537
  ---
521
538
 
522
- ## 📄 Lizenz
539
+ ## 📄 License
523
540
 
524
- GlassKit ist unter der **MIT License** veröffentlicht. Siehe [LICENSE](LICENSE) für Details.
541
+ GlassKit is released under the **MIT License**. See [LICENSE](LICENSE) for details.
525
542
 
526
- Frei nutzbar für persönliche und kommerzielle Projekte.
543
+ Free to use for personal and commercial projects.
527
544
 
528
545
  ---
529
546
 
530
547
  ## 📋 Changelog
531
548
 
532
- Alle Änderungen, Bugfixes und Design Decisions sind im **[CHANGELOG.md](CHANGELOG.md)** dokumentiert.
549
+ All changes, bugfixes, and design decisions are documented in the **[CHANGELOG.md](CHANGELOG.md)**.
533
550
 
534
551
  ---
535
552
 
536
553
  ## 🏢 Credits
537
554
 
538
- Entwickelt von der **[Jungherz GmbH](https://www.jungherz.com)**
555
+ Developed by **[Jungherz GmbH](https://www.jungherz.com)**
539
556
 
540
557
  ---
541
558
 
542
559
  <p align="center">
543
- <sub>Gebaut mit 🧊 und viel Liebe zum Detail.</sub>
560
+ <sub>Built with 🧊 and lots of attention to detail.</sub>
544
561
  </p>
package/glasskit-styles.js CHANGED
@@ -1,4 +1,4 @@
1
- // GlassKit v1.3.2 – Constructable Stylesheet
1
+ // GlassKit v1.3.4 – 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.2
3
+ Jungherz GmbH – v1.3.4
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.2",
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",
@@ -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
  },