npm - @jungherz-de/glasskit-elements - Versions diffs - 0.9.0 → 1.6.0 - Mend

@jungherz-de/glasskit-elements 0.9.0 → 1.6.0

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 (11) hide show

package/README.md +18 -16
package/dist/glasskit-elements.esm.js +212 -18
package/dist/glasskit-elements.js +213 -17
package/dist/glasskit-elements.min.js +1 -1
package/package.json +5 -5
package/src/components/containers/glk-list-item.js +60 -4
package/src/components/containers/glk-list.js +20 -1
package/src/components/navigation/glk-tab-accessory.js +65 -0
package/src/components/navigation/glk-tab-bar.js +9 -2
package/src/components/navigation/glk-tab-dock.js +51 -0
package/src/index.js +2 -0

package/README.md CHANGED Viewed

@@ -1,17 +1,17 @@
 <h1 align="center">🧊 GlassKit Elements</h1>
 <p align="center">
-  <a href="https://www.npmjs.com/package/glasskit-elements"><img src="https://img.shields.io/badge/version-0.8.3-f5a623?style=flat-square" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit-elements?style=flat-square&color=f5a623&label=version" alt="Version"></a>
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
-  <a href="#"><img src="https://img.shields.io/badge/components-27-7ec8e3?style=flat-square" alt="27 Components"></a>
+  <a href="#"><img src="https://img.shields.io/badge/components-29-7ec8e3?style=flat-square" alt="29 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v0.9.0-lightgrey?style=flat-square" alt="Changelog"></a>
-  <a href="https://www.npmjs.com/package/glasskit-elements"><img src="https://img.shields.io/badge/npm-glasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.6.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 <p align="center">
   <strong>Drop-in Web Components for <a href="https://github.com/JUNGHERZ/GlassKit">GlassKit CSS</a></strong><br>
-  27 vanilla JavaScript custom elements wrapping GlassKit's glassmorphism components.<br>
+  29 vanilla JavaScript custom elements wrapping GlassKit's glassmorphism components.<br>
   Shadow DOM &middot; Native form participation &middot; Zero dependencies.
 </p>
@@ -25,7 +25,7 @@
 ## ✨ What is GlassKit Elements?
-GlassKit Elements is a companion library to [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit). It provides **27 Web Components** that encapsulate the verbose HTML markup required by GlassKit into simple, declarative custom elements.
+GlassKit Elements is a companion library to [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit). It provides **29 Web Components** (incl. the iOS 26-style floating Tab-Bar + Accessory) that encapsulate the verbose HTML markup required by GlassKit into simple, declarative custom elements.
 ```html
 <!-- Before: 5 elements, 6 classes -->
@@ -48,8 +48,8 @@ GlassKit Elements is a companion library to [GlassKit CSS](https://github.com/JU
 | Feature | Details |
 |---|---|
 | 🔌 **Shadow DOM** | Style encapsulation via `adoptedStyleSheets` — no CSS leaking |
-| 🧩 **27 Components** | Buttons, cards, toggles, modals, accordions, lists, popovers, tab bars, and more |
-| 🪶 **Lightweight** | 105 KB raw / 83 KB minified / 14 KB gzipped (IIFE bundle), no external dependencies |
+| 🧩 **29 Components** | Buttons, cards, toggles, modals, accordions, lists, popovers, tab bars (incl. floating + accessory), and more |
+| 🪶 **Lightweight** | 117 KB raw / 92 KB minified / 15 KB gzipped (IIFE bundle), no external dependencies |
 | 📦 **Three bundle formats** | IIFE for `<script>`, minified IIFE for production, ESM for bundlers & tree-shaking |
 | 🎛️ **Form Participation** | Input, toggle, checkbox, radio, select — all work natively with `<form>` via `ElementInternals` |
 | 🌗 **Theme Sync** | Automatic dark/light mode sync via `data-theme` on `<html>` |
@@ -63,7 +63,7 @@ GlassKit Elements is a companion library to [GlassKit CSS](https://github.com/JU
 ```html
 <!-- 1. GlassKit CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.4/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.6/glasskit.min.css">
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -96,7 +96,7 @@ import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.4/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.6/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -117,8 +117,10 @@ import '@jungherz-de/glasskit-elements/components/glk-toggle.js';
 |---|---|---|
 | `<glk-nav>` | Horizontal navigation bar | — |
 | `<glk-pill>` | Circular icon button (46×46px) | `label`, `disabled` |
-| `<glk-tab-bar>` | Bottom tab bar navigation | — |
+| `<glk-tab-bar>` | Bottom tab bar navigation | `static`, `floating` |
 | `<glk-tab-item>` | Tab bar item | `label`, `active`, `badge` |
+| `<glk-tab-dock>` | Wrapper for floating tab bar + optional accessory | `accessory-left` |
+| `<glk-tab-accessory>` | Standalone glass capsule (search, compose…) | `label`, `variant` (accent, success, error), `disabled` |
 ### Content
@@ -207,16 +209,16 @@ glasskit-elements/
     index.js              # Registers all components
     base.js               # GlkElement + GlkFormElement
     components/
-      navigation/         # glk-nav, glk-pill, glk-tab-bar, glk-tab-item
+      navigation/         # glk-nav, glk-pill, glk-tab-bar, glk-tab-item, glk-tab-dock, glk-tab-accessory
       content/            # glk-card, glk-badge, glk-avatar, glk-title, ...
       buttons/            # glk-button
       forms/              # glk-input, glk-toggle, glk-checkbox, ...
       feedback/           # glk-progress, glk-modal, glk-toast, glk-popover
       containers/         # glk-accordion, glk-accordion-item, glk-list, glk-list-item
   dist/
-    glasskit-elements.js      # IIFE bundle (105 KB raw / 17 KB gzipped)
-    glasskit-elements.min.js  # IIFE minified (83 KB raw / 14 KB gzipped)
-    glasskit-elements.esm.js  # ES module bundle (101 KB raw / 16 KB gzipped)
+    glasskit-elements.js      # IIFE bundle (117 KB raw / 18 KB gzipped)
+    glasskit-elements.min.js  # IIFE minified (92 KB raw / 15 KB gzipped)
+    glasskit-elements.esm.js  # ES module bundle (112 KB raw / 17 KB gzipped)
   index.html                  # Landing page
   docs.html                   # Documentation
   showcase.html               # Interactive showcase
@@ -240,7 +242,7 @@ Requires `adoptedStyleSheets`, `ElementInternals`, and `customElements` v1.
 ## 🤖 AI / LLM Reference
-[`SKILL.md`](SKILL.md) is a tag-based, machine-readable reference for LLMs and AI copilots. It contains copy-paste-ready HTML for all 27 elements, attribute / slot / event tables, composition patterns, and a common-mistakes section. It is the companion to the class-based `SKILL.md` in [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit) — use both together for complete coverage of the glass stack.
+[`SKILL.md`](SKILL.md) is a tag-based, machine-readable reference for LLMs and AI copilots. It contains copy-paste-ready HTML for all 29 elements, attribute / slot / event tables, composition patterns, and a common-mistakes section. It is the companion to the class-based `SKILL.md` in [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit) — use both together for complete coverage of the glass stack.
 ---