Capability Gate — cinder playground

Overview

Present feature availability and next action for browser permission or support states, with accessible status text and focus management.

Usage

<script lang="ts">
  import Button from '@lostgradient/cinder/button';
  import CapabilityGate from '@lostgradient/cinder/capability-gate';
  import Link from '@lostgradient/cinder/link';
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <CapabilityGate feature="Notifications" state="permission-denied" variant="banner">
    {#snippet actions({ dismiss })}
      <Link href="#">Enable in settings</Link>
      <Button size="sm" variant="ghost" label="Dismiss" onclick={dismiss} />
    {/snippet}
  </CapabilityGate>
  <CapabilityGate feature="Offline storage" state="unsupported" variant="callout">
    <p style="font-size: 0.875rem; color: var(--cinder-text-muted); margin: 0;">
      Your browser does not support offline storage. Some features may be limited.
    </p>
  </CapabilityGate>
</div>

Guidance

Use When

Surfacing that a feature requires a browser permission such as microphone or notifications.
Communicating that a feature is unsupported in the current browser with a clear fallback path.

Avoid When

Performing the actual feature detection or permission request — wire that in userland.
Storing permission state — CapabilityGate is a pure presentation component.

Live preview

When to use

Use when

Surfacing that a feature requires a browser permission such as microphone or notifications.
Communicating that a feature is unsupported in the current browser with a clear fallback path.

Avoid when

Performing the actual feature detection or permission request — wire that in userland.
Storing permission state — CapabilityGate is a pure presentation component.

Examples

Microphone permission gate

Shows the capability gate in each state for a microphone permission request.

Notifications permission gate (banner)

A banner-style capability gate for browser notifications.

Props

Props for capability-gate
Name	Type	Default	Description
`feature` required	`text`		The feature being gated (used in accessible status text).
`state` required	`'supported'\|'unsupported'\|'permission-needed'\|'permission-denied'\|'loading'\|'unavailable'`		Current availability state.
`variant`	`'inline' \| 'banner' \| 'callout'`	`'inline'`	Presentation variant.
`actions`	`snippet`		Action row content — compose your own Buttons/links (primary, fallback, dismiss, anything else). The snippet receives a `dismiss` function that runs the gate's own unmount-and-`onDismiss` path, so a consumer dismiss button gets the component's focus handling for free: ```svelte {#snippet actions({ dismiss })} <Button label="Allow access" onclick={requestAccess} /> <Button variant="secondary" label="Not now" onclick={dismiss} /> {/snippet}```
`onDismiss`	`() => void`		Called when the user dismisses the gate. The gate unmounts itself on dismiss; move focus to a sensible target here (e.g. the control that re-opens the gate) — the component blurs the dismiss button first so focus is not stranded, but only the consumer knows the right next focus target.
`children`	`snippet`		Custom content rendered below the status text and before the actions.