GlassKit Elements

<glk-title>

Styled heading with text shadow.

<glk-badge>

Inline status badge with color variants — and, with interactive, a filter chip.

interactive renders the badge as a real <button> — pointer cursor, hover tint, focus ring, keyboard operable — and makes it emit glk-click. selected marks the chip that is on and is mirrored to aria-pressed. Try the row: it moves selected on glk-click.

Events: glk-click when interactive is set.

<glk-avatar>

Circular avatar with initials or image.

<glk-card>

Glass-effect content card.

<glk-divider>

<glk-status>

Status notice with message.

<glk-empty>

Empty state for lists and result pages: icon plate, title, short text and one action. An empty title or text hides its element.

Slots: default (an <svg> icon; a plain circle as fallback), action. Parts: empty, icon, title, text, action.

<glk-button>

Glass-styled button with three variants and size options.

Events: glk-click

type="submit" submits the form the element sits in, type="reset" resets it — once the click has finished bubbling, so a listener that calls preventDefault() on the click stops it, as on a native button. A form with invalid fields does not submit and shows the browser’s message. The submit event names the element as its submitter; .form is its form, and element.click() acts like a click. aria-expanded, aria-haspopup and aria-pressed set on the element are handed on to the native button inside, which is what screen readers read (since 1.20.0).

<glk-pill>

Small circular icon button (46x46px).

aria-expanded, aria-haspopup and aria-pressed are handed on to the native button inside (since 1.20.0) — <glk-popover> sets aria-expanded on its trigger.

<glk-input>

Text input with label, hint, and error state.

Events: glk-input, glk-change

Slots (since 1.22.0): prefix and suffix put an icon, a currency, a unit or a button inside the field’s box, at its start and end — right to left they swap sides. Each shows only while something is slotted into it; its width is measured and the text keeps clear of it. A click on slotted text, an icon or a disabled control goes through to the field; enabled controls, <glk-button> and <glk-select> included, links and elements with tabindex take their own (since 1.22.2 — before, every slotted element took the click). Slot the control itself: one wrapped in a slotted element needs pointer-events: auto from the page. A container locked with pointer-events: none does not hold a control; lock it with inert, or disable the control. Their text is read with the field as its description. The box is the part box, the affixes prefix and suffix.

<glk-textarea>

Attributes: label, rows, placeholder, required, readonly (since 1.22.0), name, value, disabled. The label names the field.

<glk-select>

Children: native <option> elements. With required and an empty first option (value="") the form does not submit until a choice is made (since 1.20.0). The label names the field. A value — attribute or property — that names no option yet is kept and selected once its option arrives, until the user picks another (since 1.22.0; before, a value set as a property before the options were copied was lost). A form reset returns to the value attribute.

<glk-search>

The search field has no visible label; label names it for screen readers (since 1.20.0) — without it the placeholder is all they can say.

<glk-toggle>

Switch toggle with form participation.

Events: glk-change → { checked: boolean }

The switch is the native checkbox inside, with role="switch": one control for screen readers, named by label, its state read from the checkbox. Since 1.20.0 the element itself carries no role, aria-checked or aria-disabled — style and select on [checked] and [disabled]. element.click() and a <label> around the element or naming it toggle it, as they do a native checkbox; the same holds for <glk-checkbox> and <glk-radio>. Without label the element is exactly as large as its track, 52 × 30 px.

<glk-checkbox>

required keeps the form from submitting until the box is ticked (since 1.20.0).

<glk-radio>

required on any radio of a group makes the group required; any checked radio satisfies it, as with native radios (since 1.20.0).

<glk-range>

<glk-segmented>

A small, exclusive choice as one control. Renders one <button> per option, the chosen one marked aria-pressed="true"; a value change only re-sets that attribute, so focus stays where it was. Form-associated: a surrounding <form> receives name=value, reset restores the initial value. Try it: Tab to a button, press Space. More options than fit: overflow="scroll" keeps one row that scrolls sideways and keeps the chosen option in view, overflow="wrap" breaks it into lines.

Events: glk-change { value } — only on a change made by the user. Part: group.

<glk-calendar>

One month with a day to pick. The days are buttons in a role="group", the chosen one aria-pressed="true", each named with its full date; month title, weekday names and the first day of the week come from Intl for the locale (week-start overrides). One tab stop: arrows move by a day or a week, Home/End to the ends of the week, PageUp/PageDown by a month — moving past the month’s edge shows that month and emits glk-month. Arrows only move focus; Enter or Space picks, so a calendar that opens a sheet on every pick stays quiet while the user looks around. Days outside min/max are aria-disabled: in the arrow path, announced, never picked. Form-associated like <glk-segmented>. Try it: Tab into the grid, use the arrows, press Enter.

Events: glk-change { value } on a pick by the user; glk-month { month } when the user moves to another month. Properties: month, value, marks, locale, label, disabled. Parts: calendar, head, title, grid.

<glk-image-picker>

One image with a preview, resized on the client before it goes anywhere. Choose opens the file dialog from a real button; the file is decoded with createImageBitmap, the EXIF rotation of a phone photo applied, drawn onto a canvas no larger than max and handed out as a data URL in glk-change. The src property holds it and is not reflected, so a data URL of megabytes never lands in the DOM. A file the browser cannot decode — Chrome and HEIC, a corrupt file — emits glk-error instead of failing silently. Not form-associated: listen to glk-change and upload. Try it with a photo from your phone.

Events: glk-change { dataUrl, width, height, size } after a pick, and on remove with an empty dataUrl and zeros; glk-error { message, name } when the file cannot be decoded. Property: src (not reflected). Parts: picker, preview, meta, label, hint, actions.

<glk-nav> + <glk-pill>

Horizontal navigation bar with circular icon buttons.

<glk-tab-bar> + <glk-tab-item>

Bottom tab bar navigation.

Events: glk-tab-change → { tab: Element }

<glk-tab-dock> + <glk-tab-bar floating> + <glk-tab-accessory>

Pill-shaped, centered, floating tab bar inspired by iOS 26 Liquid Glass. Pair with an optional <glk-tab-accessory> capsule (e.g. search, compose). The active tab gets a soft radial Spotlight halo instead of the underline dot. Use .glass-bg--has-tab-bar-floating on the outer background.

Events: <glk-tab-accessory> emits glk-click when clicked (suppressed when disabled).

Tip: Use .glass-bg--has-tab-bar-floating on the outer .glass-bg instead of --has-tab-bar to reserve the right amount of bottom padding.

<glk-steps>

Progress through a short flow, purely presentational: the current step carries aria-current="step", done steps show an SVG check. Narrowing in tight frames is the CSS block's container query (below 360 px only the current label stays) — the element knows nothing about it.

Property current reflects the attribute; steps accepts an array or comma-separated text. Part: steps.

<glk-date-strip>

A row of day chips that scrolls sideways — a booking horizon, the days around today. Chips are buttons in a role="group", the chosen one aria-pressed="true", each named with its full date. One tab stop: arrow keys move between chips, Home/End jump to the ends, Enter or Space picks. The chosen chip is scrolled to the middle of the strip after the first layout and on every value change — the strip alone scrolls, never the page. Weekday names come from Intl for the locale. Try it: the strip below starts with its 20th day chosen.

Events: glk-change { value } — only on a change made by the user. Properties: value, marks (object or JSON text), locale, label. Part: strip.

<glk-progress>

<glk-modal>

Modal dialog with title, body, and action buttons. Since 1.20.0 it is a native <dialog>, opened with showModal(): it lies above everything else, the page behind it is inert for pointer, keyboard and screen readers, focus moves into it and goes back to where it came from when it closes, and its content is out of reach while it is closed. The title names the dialog.

Methods: .show(), .close()   Events: glk-close

Which element gets the focus on opening, browsers decide differently — Chrome takes the first field of the content, Safari the first action. Mark one with autofocus, in the content or among the actions, to settle it. Escape and a click on the dimmed area close the modal with its fade and emit glk-close; .close() does not emit. While it is open, everything outside is inert — a <glk-toast> shown then is neither clickable nor announced, so give feedback inside the modal or close it first.

<glk-toast>

Notification at the top of the screen that hides itself — and, since 1.19.0, one that offers something: with action-label (or show(message, { action })) it gets a button and an ×, and stays until one of them is used unless a duration is set. The action emits glk-action and closes the toast — unless a listener calls preventDefault() or shows the next message; the × and Escape emit glk-close. While the pointer or the focus is on it, it does not time out. It is a polite live region, so the message is announced.

Methods: .show(message, variant, duration), .show(message, { variant, duration, action: { label, value }, dismissible }), .dismiss(). Slot: icon — replaces the built-in icon; leave its stroke unset and it takes the variant colour. Events: glk-action { action, label } (cancelable), glk-close (× or Escape), glk-dismiss (timed out).

<glk-popover>

Anchored dropdown / menu container. Wraps a trigger element (via slot="trigger") and its floating content. The element manages .is-open toggling, outside-click dismiss, and Escape-key close internally — no manual class toggling needed.

Events: glk-open, glk-close

Methods: .show(), .close(), .toggle()

Heads-up: the method is deliberately called .toggle() — not .togglePopover(), which collides with the native HTMLElement.togglePopover() API.

The trigger tells whether the popover is open: it gets aria-expanded, also after it is swapped (since 1.20.0). <glk-button> and <glk-pill> hand it on to their native button.

<glk-sheet>

Bottom sheet — the mobile sibling of <glk-modal>. Opening and closing are animated by GlassKit's .glass-sheet block; the overlay is hidden only after transitionend, so no blurred layer idles behind the page, and under prefers-reduced-motion it switches at once. Scrim click and Escape close it and emit glk-close; show() / close() do not. inline embeds the panel without an overlay.

Methods: show(), close(). Slots: default (content), actions. Events: glk-close — only when the user closes it (scrim, Escape). Parts: overlay, sheet, title, body, actions.

<glk-accordion> + <glk-accordion-item>

Collapsible accordion sections.

Events: glk-toggle → { open: boolean }

The trigger carries aria-expanded and aria-controls; a closed section is inert, so its links and fields are out of the tab order and out of the accessibility tree until it opens (since 1.20.0).

<glk-list> + <glk-list-item>

iOS-style grouped settings list. Items carry a leading icon, title + optional subtitle, and a trailing element. Dividers between items are drawn automatically — never add <hr> markup between items. Supports section headers, large icons, multi-line subtitles, trailing values, and semantic variants.

Events: glk-click on <glk-list-item> when interactive is set.

Framework-safe: both elements use pure Shadow DOM with slot projection — no child node cloning — so they compose cleanly inside lit-html templates, HybridsJS, React, Vue, and Svelte.