--- name: glasskit-elements description: GlassKit Elements is a vanilla-JS Web Components library (v1.6.2) wrapping GlassKit CSS v1.6.0. It provides 29 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `` tags to ensure correct attributes, slots, events, and composition. --- # GlassKit Elements – AI Component Reference > **Purpose:** AI-optimized reference for generating correct `` markup. > Companion to the class-based `SKILL.md` in [`@jungherz-de/glasskit`](https://github.com/JUNGHERZ/GlassKit) — the element wrappers delegate visuals and tokens to GlassKit CSS, so both references are best used together. --- ## 1. Setup & Boilerplate ### Installation ```bash npm install @jungherz-de/glasskit-elements @jungherz-de/glasskit ``` Peer dependency `@jungherz-de/glasskit >=1.6.0` is required. The v1.6.0 floating Tab-Bar variant + Accessory capsule (``, ``, ``) requires CSS v1.6.0. ### Import (ES modules) ```js // Full bundle — registers all 29 elements import '@jungherz-de/glasskit-elements'; // Named imports (for direct references to constructor classes) import { GlkButton, GlkModal } from '@jungherz-de/glasskit-elements'; // Tree-shaken per-component import import { GlkButton } from '@jungherz-de/glasskit-elements/components/glk-button.js'; ``` ### CDN ```html ``` Note: the elements bundle the GlassKit CSS `CSSStyleSheet` via `adoptedStyleSheets`. You do **not** need to load `glasskit.css` separately — it is already inside every component's shadow root. ### Minimal template ```html

Hello GlassKit

Welcome!

``` The outer `.glass-bg` class (from GlassKit CSS) still provides the aurora background. Inside the shadow roots, each element carries its own glass styling. ### Theme ```html ``` ```js function toggleTheme() { const html = document.documentElement; const current = html.getAttribute('data-theme') || 'dark'; html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark'); } ``` A single module-level `MutationObserver` watches `data-theme` on `` and syncs every live GlassKit Element instance — you never set `data-theme` on individual elements. --- ## 2. Core Concepts | Concept | Summary | |---|---| | Tag prefix | `glk-*` (analogous to the `glass-*` CSS prefix) | | Rendering | Shadow DOM (`mode: 'open'`) with `adoptedStyleSheets` | | Stylesheet sharing | GlassKit's `glassSheet` is the same `CSSStyleSheet` object in every element — no CSS duplication | | Theme sync | Global MutationObserver on `` | | Events | Custom `glk-*` events, all `bubbles: true, composed: true` | | Form participation | `GlkFormElement` uses `ElementInternals` (`static formAssociated = true`) | | API style | Declarative HTML attributes + reflected JS properties | Custom properties (`--gl-*`) defined on `:root` or `` pass through shadow boundaries automatically, so custom theming works with a single global stylesheet. --- ## 3. Element Catalog (29 elements) ### 3.1 `` Horizontal navigation bar — flex container. Typically holds `` buttons. ```html

``` No attributes. Default slot for children. --- ### 3.2 `` Circular icon button (46×46 px). ```html ``` | Attribute | Type | Description | |---|---|---| | `label` | String | `aria-label` for accessibility | | `disabled` | Boolean | Disabled state | Default slot: icon SVG (24×24). Events: `glk-click` when clicked. --- ### 3.3 `` + `` Fixed bottom navigation. Requires `.glass-bg--has-tab-bar` on the outer background to reserve padding. ```html

``` **``** — container. | Attribute | Type | Description | |---|---|---| | `static` | Boolean | Switches from `position: fixed` to `position: relative` (useful for docs / previews) | | `floating` | Boolean | Pill-shaped Liquid Glass variant — adds `.glass-tab-bar--floating`. Use inside `` | **``** | Attribute | Type | Description | |---|---|---| | `label` | String | Tab label | | `active` | Boolean | Active state — gets a soft radial Spotlight halo when inside a `floating` bar | | `badge` | String / Number | Numeric badge on the icon | Default slot: icon SVG. Events: `glk-tab-select` on click. #### Floating variant + Accessory (`` + ``) iOS 26 Liquid Glass-style floating tab bar. Wrap a `` in a ``, optionally with a `` (search, compose…) capsule next to it. Use `.glass-bg--has-tab-bar-floating` on the outer background to reserve padding. ```html

``` **``** — wrapper that holds the floating bar + optional accessory. | Attribute | Type | Description | |---|---|---| | `accessory-left` | Boolean | Place the accessory on the left of the bar (default is right) | **``** — standalone glass capsule next to the bar (e.g. search, compose). 56×56 px. | Attribute | Type | Description | |---|---|---| | `label` | String | `aria-label` for accessibility | | `variant` | String | `accent`, `success`, `error` — filled colored capsule with white icon | | `disabled` | Boolean | Disabled state | Default slot: icon SVG (22×22). Events: `glk-click` (suppressed when disabled). --- ### 3.4 `` Inline avatar circle. ```html MJ ``` | Attribute | Type | Description | |---|---|---| | `size` | String | `sm`, `md` (default), `lg` | | `src` | String | Image URL; if omitted, text content is shown as initials | --- ### 3.5 `` Inline status badge. ```html Default

Active

Done

Failed ``` | Attribute | Type | Description | |---|---|---| | `variant` | String | `primary`, `success`, `error` | Default slot: label text. --- ### 3.6 `` Glass container for content. ```html

Standard card content.

Glowing card variant with light streak.

``` | Attribute | Type | Description | |---|---|---| | `glow` | Boolean | Adds frosted glass gradient + light streak | Default slot: content. --- ### 3.7 `` Horizontal separator with gradient fade. ```html ``` No attributes, no content. --- ### 3.8 `` Inline status notice (muted surface). ```html ``` | Attribute | Type | Description | |---|---|---| | `message` | String | Status text | --- ### 3.9 `` Page title with text shadow. ```html Settings ``` No attributes. Default slot: heading text. --- ### 3.10 `` Full-width glass button (56 px). Three variants, four sizes. ```html Save

Cancel

Learn more

Small

Large

Auto width

Disabled ``` | Attribute | Type | Default | Description | |---|---|---|---| | `variant` | String | — | `primary`, `secondary`, `tertiary` | | `size` | String | `md` | `sm`, `md`, `lg`, `auto` | | `disabled` | Boolean | `false` | Disabled state | | `type` | String | `button` | Native button type | Events: `glk-click` (suppressed when disabled). Default slot: button label (text or SVG + text). --- ### 3.11 `` Form-associated checkbox with glass styling. ```html ``` | Attribute | Type | Description | |---|---|---| | `label` | String | Label text | | `checked` | Boolean | Checked state | | `disabled` | Boolean | Disabled state | | `name` | String | Form field name | | `value` | String | Value submitted when checked (default `"on"`) | Events: `glk-change` → `{ checked }`; also dispatches native `change`. Property: `.checked`. --- ### 3.12 `` Text input with label + hint. ```html

``` | Attribute | Type | Description | |---|---|---| | `label` | String | Label above the input | | `type` | String | Native input type (`text`, `email`, `password`, `number`, …) | | `placeholder` | String | Placeholder text | | `hint` | String | Helper text below the input | | `error` | Boolean | Error styling (red border + red hint) | | `disabled` | Boolean | Disabled state | | `required` | Boolean | Required field | | `name` | String | Form field name | | `value` | String | Current value | Events: `glk-input` → `{ value }`, `glk-change` → `{ value }`. Native `input` / `change` also dispatched. Property: `.value`. --- ### 3.13 `` Radio button. Group multiple with the same `name`. ```html

``` | Attribute | Type | Description | |---|---|---| | `label` | String | Label text | | `name` | String | Group name | | `value` | String | Value submitted when checked | | `checked` | Boolean | Checked state | | `disabled` | Boolean | Disabled state | Events: `glk-change` → `{ checked, value }`. --- ### 3.14 `` Slider input. ```html ``` | Attribute | Type | Description | |---|---|---| | `label` | String | Label text | | `min` | Number | Minimum value | | `max` | Number | Maximum value | | `value` | Number | Current value | | `step` | Number | Step size | | `name` | String | Form field name | | `disabled` | Boolean | Disabled state | Events: `glk-input`, `glk-change`. Property: `.value`. --- ### 3.15 `` Search input with leading icon. ```html ``` | Attribute | Type | Description | |---|---|---| | `placeholder` | String | Placeholder text | | `value` | String | Current value | | `name` | String | Form field name | | `disabled` | Boolean | Disabled state | Events: `glk-input`, `glk-change`. --- ### 3.16 `` Dropdown select. Pass native `