Kelp

https://kelpui.com/docs/
Admin
Kelp is a UI library or framework providing components and utilities for building user interfaces,...
Tokens:63,536
Snippets:701
Trust Score:7.1
Update:10 months ago
Show doc for...
Tokens:
Raw
### Building Kelp UI with npm and ESBuild

Source: https://kelpui.com/docs/customizing/install

This snippet shows the command-line instructions for setting up and building Kelp UI using npm and the included ESBuild script. It first installs the necessary dependencies and then executes the build process to compile customized CSS and JavaScript files.

```bash
npm install
npm run build
```

--------------------------------

### KelpUI Tabs with a Starting Tab Option

Source: https://kelpui.com/docs/components/tabs

Illustrates how to configure the `<kelp-tabs>` component to display a specific tab and its content as the default upon loading. This is achieved by adding the `start` attribute to the `<kelp-tabs>` element with the ID of the desired content.

```html
<kelp-tabs start="#druid">
	<ul tabs>
		<li><a href="#wizard">Wizard</a></li>
		<li><a href="#sorcerer">Sorcerer</a></li>
		<li><a href="#druid">Druid</a></li>
	</ul>

	<div id="wizard">...</div>
	<div id="sorcerer">...</div>
	<div id="druid">...</div>
</kelp-tabs>
```

--------------------------------

### Aligning Navbar Items to Start

Source: https://kelpui.com/docs/components/navbar

Illustrates how to change the justification of navbar items, especially when they wrap. By default, items center. This example shows how to align them to the start using the `--justify` CSS variable, either globally via CSS or inline.

```css
@layer kelp.extend {
	.navbar {
		--justify: start;
	}
}
```

```html
<nav class="navbar" style="--justify: start">
	<!-- ... -->
</nav>
```

--------------------------------

### CDN Install - Kelp UI

Source: https://kelpui.com/docs/getting-started/installation

Install Kelp UI using a Content Delivery Network (CDN) for quick and simple integration. This method includes both the CSS and JavaScript files, enabling immediate use of the library's features.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kelpui@1/css/kelp.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/kelpui@1/js/kelp.js"></script>
```

--------------------------------

### Kelp UI Accessibility Color Contrast Example (CSS)

Source: https://kelpui.com/docs/customizing/colors

Illustrates a subset of Kelp UI's primary color variables, specifically demonstrating the 'muted' variation. This example highlights the color shade differences used to meet WCAG AA and AAA contrast guidelines.

```css
:where(:root) {

	--color-primary-fill-muted: var(--color-blue-95);
	--color-primary-border-muted: var(--color-blue-90);
	--color-primary-on-muted: var(--color-blue-30);

}
```

--------------------------------

### Kelp UI Pre-scaling Example (HTML)

Source: https://kelpui.com/docs/getting-started/typography

Illustrates the less efficient method of applying size classes individually to each element within a container. This approach is contrasted with the 'em' unit scaling provided by Kelp UI.

```html
<div class="callout">
	<h2 class="size-xl">Hello world!</h2>
	<p class="size-xl">How are you today?</p>
	<button class="size-xl">Say hi</button>
</div>
```

--------------------------------

### Kelp UI Dialog Methods Example (JavaScript)

Source: https://kelpui.com/docs/components/dialog

Provides examples of using the JavaScript methods available on a dialog element: 'showModal()' to open it, 'close()' to close it, and 'requestClose()' to close it while emitting a 'cancel' event.

```javascript
const modal = document.querySelector('#my-modal');

// Open the modal/drawer
modal.showModal();

// Close the modal
modal.close();

// Close the modal with a cancel event
modal.requestClose();

```

--------------------------------

### Starter HTML - Kelp UI Integration

Source: https://kelpui.com/docs/getting-started/installation

A basic HTML template demonstrating how to integrate Kelp UI using local CSS and JavaScript files. This serves as a starting point for building web pages with Kelp UI.

```html
<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Kelp</title>
		<meta name="description" content="The HTML-first UI library">
		
		<link rel="stylesheet" href="./css/kelp.css">
	</head>
	<body>
		<main class="container">
			<h1>👋 Hi, Universe!</h1>
		</main>
	</body>
	<script type="module" src="./js/kelp.js"></script>
</html>
```

--------------------------------

### Basic Badge Usage (HTML)

Source: https://kelpui.com/docs/components/badges

Demonstrates the fundamental usage of the `.badge` class to create a simple badge element. This is the starting point for all badge implementations.

```html
<span class="badge">
	Coming Soon...
</span>
```

--------------------------------

### Stack Layout Example

Source: https://kelpui.com/docs/layout/stack

Demonstrates the basic usage of the `.stack` class to create a vertically spaced layout. It is commonly used for long-form content or form elements where consistent spacing is desired between items.

```html
<div class="stack">
	<div>Merlin</div>
	<div>Gandalf</div>
	<div>Radagast</div>
</div>
```

--------------------------------

### Kelp UI Breakout Example (HTML)

Source: https://kelpui.com/docs/layout/container

Illustrates the use of the `.breakout` class in Kelp UI, which allows an element to span the full width of the page while maintaining its position within the normal document flow.

```html
<div class="container">
	<p>Some normally contained content.</p>
	<div class="breakout">
		This spans the full width of the page.
	</div>
</div>
```

--------------------------------

### KelpUI Text Formatting Example (HTML)

Source: https://kelpui.com/docs/components/text

Demonstrates various text formatting options available in KelpUI, including bold, italic, strikethrough, highlighting, and subscript/superscript. This example utilizes HTML tags and KelpUI's implied styling.

```html
This is default text. 
<strong>This is bold...</strong> 
<em>...and this is italic.</em> 
<strong><em>This is what they look like together.</em></strong> 
<del>This is strikethrough text.</del> 
<mark>This text is highlighted.</mark> 
Superscripts<sup>1</sup> and subscripts<sub>xyz</sub>
```

--------------------------------

### HTML: Implicit Label Usage Example

Source: https://kelpui.com/docs/forms/label

Provides an example of how an implicit label might be used in practice, specifically for a checkbox. While functional, it is noted that explicit association is preferred for accessibility.

```html
<label>
	<input type="checkbox" name="awesome">
	I love Pixar movies
</label>
```

--------------------------------

### Cluster Layout Example - HTML

Source: https://kelpui.com/docs/layout/cluster

Demonstrates the basic usage of the `.cluster` class for creating an inline, evenly spaced layout that wraps to the next line. This is useful for collections of items like tags or image galleries.

```html
<div class="cluster">
	<div class="callout">Merlin</div>
	<div class="callout">Gandalf</div>
	<div class="callout">Radagast and his animals</div>
	<div class="callout">Wand</div>
	<div class="callout">Sword</div>
	<div class="callout">Wizard Staff</div>
	<div class="callout">The magical secrets of the universe</div>
	<div class="callout">Potions</div>
	<div class="callout">Cauldron</div>
	<div class="callout">Supercalifragilisticexpialidocious</div>
</div>
```

--------------------------------

### Kelp UI Container Sizes Example (HTML)

Source: https://kelpui.com/docs/layout/container

Demonstrates the usage of Kelp UI's container classes to center content and restrict its maximum width. These classes provide predefined responsive breakpoints for various screen sizes.

```html
<div class="container-xs">
	<code>.container-xs</code>
</div>

<div class="container-s">
	<code>.container-s</code>
</div>

<div class="container-m">
	<code>.container</code> or <code>.container-m</code>
</div>

<div class="container-l">
	<code>.container-l</code>
</div>

<div class="container-xl">
	<code>.container-xl</code>
</div>

<div class="container-2xl">
	<code>.container-2xl</code>
</div>
```

--------------------------------

### Content Choreography with Start Classes

Source: https://kelpui.com/docs/layout/grid

Control the order of grid items on larger screens using `.start-*` helper classes. `.start-first` moves an item to the beginning, while `.start-{fraction}` classes position items at specific fractional points within the grid.

```html
<div class="grid-m">
	<div class="item-third">1</div>
	<div class="item-third start-first">2</div>
	<div class="item-third">3</div>
</div>

<div class="grid-m">
	<div class="item-third">1</div>
	<div class="item-third start-two-thirds">2</div>
</div>

<div class="grid-m">
	<div class="item-third start-two-thirds">1</div>
	<div class="item-third start-third">2</div>
	<div class="item-third start-first">3</div>
</div>
```

--------------------------------

### KelpUI Inline Code and Preformatted Text Example (HTML/CSS)

Source: https://kelpui.com/docs/components/code

Demonstrates the usage of KelpUI styles for inline code and preformatted text. It shows how to apply the `.js-example` class for inline code and uses a `<pre><code>` block for preformatted text. Note that KelpUI does not provide syntax highlighting.

```html
Inline code: <code>.js-example</code>.

<pre><code>/* Preformatted Text */
.js-example {
	color: #272727;
	background: #ffffff;
}</code></pre>
```

--------------------------------

### Kelp UI Proportional Scaling Example (HTML)

Source: https://kelpui.com/docs/getting-started/typography

Demonstrates how to apply size scaling to a parent element, affecting all child elements proportionally using 'em' units. Avoids repeated class application on child elements. Compounding 'em' units can lead to unintended larger sizes if not managed carefully.

```html
<div class="callout size-xl">
	<h2>Hello world!</h2>
	<p>How are you today?</p>
	<button>Say hi</button>
</div>
```

--------------------------------

### Kelp UI Compounding Size Example (HTML)

Source: https://kelpui.com/docs/getting-started/typography

Shows how nested size classes in Kelp UI, using 'em' units, can lead to elements becoming larger than intended due to compounded scaling. This highlights a potential pitfall when applying multiple size modifiers.

```html
<!-- The <h2> element will get bigger twice -->
<div class="callout size-xl">
	<h2 class="size-2xl">Hello world!</h2>
</div>
```

--------------------------------

### Kelp UI Dropdown Component Example

Source: https://kelpui.com/docs/components/dropdown

Demonstrates the implementation of a dropdown menu using the `<kelp-disclosure>` web component. This component hides content until a toggling element is activated, offering various interactive options within the dropdown.

```html
<kelp-disclosure is-dropdown>
	<button >Toggle Content</button>
	<ul>
		<li>Now you see me...</li>
		<li>Now you don't!</li>
		<li><a href="#">With a link</a></li>
		<li><button>With a button</button></li>
	</ul>
</kelp-disclosure>
```

--------------------------------

### Input with Placeholder Attribute HTML

Source: https://kelpui.com/docs/components/text-input

Shows how to use the 'placeholder' attribute on an '<input>' element to provide example or guidance text. It's important to note that placeholder text should not replace a '<label>'.

```html
<label for="pixar">What's the best Pixar movie?</label>
<input type="text" id="pixar" name="pixar" placeholder="Up!">
```

--------------------------------

### Web Component Options & Settings

Source: https://kelpui.com/docs/customizing/web-components

Kelp UI web components can be customized using HTML attributes. This example shows how to configure the `<kelp-toc>` component.

```APIDOC
## Web Component Options & Settings

Every Web Component in Kelp exposes a set of options you can set using HTML attributes.
For example, the `<kelp-toc>` component lets you specify the heading level, a label for the list, a parent container to target, and any custom CSS to add to the generated list.

### Request Example
```html
<kelp-toc
	level="h3"
	heading="On this page..."
	target="#content"
	list-class="list-unstyled"
></kelp-toc>
```

This is the same as passing an object of options into a class in a traditional JavaScript component.
```

--------------------------------

### Importing Specific CSS Modules in Kelp UI

Source: https://kelpui.com/docs/customizing/install

This snippet demonstrates how to selectively import CSS files within the `/modules` directory of Kelp UI. It shows how to comment out unwanted module imports (e.g., badges, avatar, skeleton) and include desired ones (e.g., callouts). This method is suitable for buildless setups but may impact compression efficiency.

```css
/* Components... but only load callouts */
/*@import "./components/badges.css";*/
@import "./components/callouts.css";
/*@import "./components/avatar.css";*/
/*@import "./components/skeleton.css";*/
```

--------------------------------

### Using Event Keys for Component Communication (HTML)

Source: https://kelpui.com/docs/customizing/web-components

This example demonstrates how to use `event-keys` on a `<kelp-form-ajax>` component to filter events received by a `<kelp-html-ajax>` component. This allows for targeted communication between specific component instances.

```html
<kelp-form-ajax 
	event-keys="login"
>
	<!-- ... -->
</kelp-form-ajax>

<!-- ... -->
<kelp-html-ajax
	events="kelp-form-ajax:success"
	keys="login"
>
	<!-- ... -->
</kelp-html-ajax>
```

--------------------------------

### CSS Media Query Example for Dark Mode

Source: https://kelpui.com/docs/getting-started/dark-mode

This is an example of how CSS media queries, specifically `prefers-color-scheme: dark`, can be used to detect OS dark mode settings and update CSS variables accordingly. KelpUI explains why it doesn't rely solely on this method.

```css
@media (prefers-color-scheme: dark) {
	/* Update CSS variables */
}
```

--------------------------------

### HTML Link Example - Kelp UI

Source: https://kelpui.com/docs/components/links

Demonstrates the default hyperlink styling in Kelp UI, which features a dotted underline that becomes solid on hover. This styling can be customized via CSS variables in the `kelp.theme` cascade layer.

```html
<a href="https://gomakethings.com">Learn more at Go Make Things.</a>
```

--------------------------------

### Accessing Component Properties (JavaScript)

Source: https://kelpui.com/docs/customizing/web-components

This example illustrates how to query a KelpUI component, like `<kelp-toggle-pw>`, and access its public properties, such as `.isVisible`, to determine its current state and conditionally execute logic.

```javascript
const pw = document.querySelector('kelp-toggle-pw');
if (pw.isVisible) {
	console.log('The password is visible!');
} else {
	console.log('You cannot see it...');
}
```

--------------------------------

### Responsive Scaling with `em` Units - HTML

Source: https://kelpui.com/docs/customizing/typography

Demonstrates how to use `em` units for scaling UI elements proportionally to font size changes. This example shows a more concise way to apply size adjustments to a group of elements within a container using a single class, compared to applying the size class to each element individually. It highlights the compounding nature of `em` units when nesting size classes.

```html
<div class="callout size-xl">
	<h2>Hello world!</h2>
	<p>How are you today?</p>
	<button>Say hi</button>
</div>
```

```html
<!-- The <h2> element will get bigger twice -->
<div class="callout size-xl">
	<h2 class="size-2xl">Hello world!</h2>
</div>
```

--------------------------------

### Customizing Skeleton Component with CSS Variables (HTML)

Source: https://kelpui.com/docs/components/skeleton

This example shows how to customize the appearance of the skeleton component using CSS variables for height, width, and border-radius. These variables allow for fine-grained control over the placeholder's dimensions and shape, enabling more realistic skeleton layouts.

```html
<div class="sidecar">
	<div>
		<div class="skeleton" style="--height: 8em; --width: 8em; --border-radius: 50%;"></div>
	</div>
	<div>
		<div class="skeleton" style="--width: 8em;"></div>
		<div class="skeleton"></div>
		<div class="skeleton" style="--width: 12em;"></div>
		<div class="skeleton" style="--height: 2em; --width: 6em;"></div>
	</div>
</div>
```

--------------------------------

### Configure Manual Tab Activation Mode in Kelp UI

Source: https://kelpui.com/docs/components/tabs

This example shows how to set up Kelp UI tabs in manual mode using the `[manual]` attribute. In this mode, tab focus shifts with arrow keys, but content is only displayed upon explicit user activation (click, enter, or spacebar). This is particularly useful for scenarios involving asynchronous content loading via APIs, though the default behavior is generally preferred for accessibility.

```html
<kelp-tabs manual>
	<ul class="list-inline" tabs>
		<li><a href="#wizard">Wizard</a></li>
		<li><a href="#sorcerer">Sorcerer</a></li>
		<li><a href="#druid">Druid</a></li>
	</ul>
	<div id="wizard">...</div>
	<div id="sorcerer">...</div>
	<div id="druid">...</div>
</kelp-tabs>
```

--------------------------------

### Handle Kelp UI Tabs Events with JavaScript

Source: https://kelpui.com/docs/components/tabs

This JavaScript code demonstrates how to listen for and respond to events emitted by the `<kelp-tabs>` component. It includes examples for `kelp-tabs:ready` (component instantiation), `kelp-tabs:select-before` (before a tab is selected, with the option to cancel), and `kelp-tabs:select` (after a tab has been successfully selected). The `event.detail` object provides information about the current and next tabs/panes.

```javascript
document.addEventListener('kelp-tabs:ready', (event) => {
	console.log('ready:', event.target);
});

document.addEventListener('kelp-tabs:select-before', (event) => {
	console.log('A tab is about to selected in:', event.target);
	console.log('The currently selected tab is:', event.detail.currentTab);
	console.log('The currently selected content pane is:', event.detail.currentPane);
	console.log('The tab that will be selected is:', event.detail.nextTab);
	console.log('The content pane that will be selected is:', event.detail.nextPane);

	// Stop this change from happening
	// The currentTab and currentPane will remain selected
	event.preventDefault();
});

document.addEventListener('kelp-tabs:select', (event) => {
	console.log('A tab was selected in:', event.target);
	console.log('The currently selected tab is:', event.detail.tab);
	console.log('The currently selected content pane is:', event.detail.pane);
});

```

--------------------------------

### Listening to KelpUI Disclosure Events

Source: https://kelpui.com/docs/components/disclosure

Provides JavaScript examples for listening to various events emitted by the `<kelp-disclosure>` component, including `ready`, `show-before`, `show`, `hide-before`, and `hide`. It shows how to access event targets and prevent default actions.

```javascript
document.addEventListener('kelp-disclosure:ready', (event) => {
	console.log('ready:', event.target);
});

document.addEventListener('kelp-disclosure:show-before', (event) => {
	console.log('A disclosure is about to show content:', event.target);

	// Stop this from happening
	event.preventDefault();
});

document.addEventListener('kelp-disclosure:show', (event) => {
	console.log('Content was shown:', event.target);
});

document.addEventListener('kelp-disclosure:hide-before', (event) => {
	console.log('A disclosure is about to hide content:', event.target);

	// Stop this from happening
	event.preventDefault();
});

document.addEventListener('kelp-disclosure:hide', (event) => {
	console.log('Content was hidden:', event.target);
});
```

--------------------------------

### Autogrow Textarea with Starting Value - HTML

Source: https://kelpui.com/docs/components/textarea

Demonstrates how the `<kelp-autogrow>` component handles textareas that are initialized with content exceeding the default height. The component expands the textarea on load to accommodate the initial text.

```html
<label for="wizards">Best Wizards</label>
<kelp-autogrow>
	<textarea id="wizards" name="wizards">merlin
radagast
gandalf
ursula
morgan
rand
moraine
nynaeve</textarea>
</kelp-autogrow>
```

--------------------------------

### Kelp UI Theme Customization for Links

Source: https://kelpui.com/docs/components/links

Shows how to customize link colors and decorations using CSS variables within the `kelp.theme` cascade layer. This example includes settings for both light and dark themes, allowing for easy theming adjustments.

```css
@layer kelp.theme {

	/* Default Light Theme */
	:where(:root),
	.kelp-theme-light {
		--color-text-link: var(--color-blue-50);
		--color-text-link-hover: var(--color-blue-40);
		--decoration-text-link: underline dotted;
		--decoration-text-link-hover: underline;
	}

	/* Dark Theme */
	.kelp-theme-dark {
		--color-text-link: var(--color-blue-70);
		--color-text-link-hover: var(--color-blue-80);
	}

}
```

--------------------------------

### Autogrow Textarea Event Listener - JavaScript

Source: https://kelpui.com/docs/components/textarea

Provides an example of how to listen for the `kelp-autogrow:ready` event, which is fired by the `<kelp-autogrow>` web component once it has been initialized and is ready to function. This event can be used to perform actions after the component is set up.

```javascript
document.addEventListener('kelp-autogrow:ready', (event) => {
	console.log('ready:', event.target);
});

```

--------------------------------

### Dismiss Dialog with `[command]` Attribute

Source: https://kelpui.com/docs/components/dialog

This example demonstrates dismissing a dialog using the `[command='close']` attribute on a button, linked to the dialog via `[commandfor]`. This provides a declarative way to close dialogs.

```html
<dialog id="goodbye">
	<p>See you real soon!</p>

	<button 
		command="close"
		commandfor="goodbye"
	>
		Close
	</button>
</dialog>

```

--------------------------------

### Kelp UI Grid System: Mobile-First Breakpoints

Source: https://kelpui.com/docs/layout/grid

Illustrates how to implement mobile-first grid layouts in Kelp UI using breakpoint-specific classes. These classes, such as `.grid-s`, `.grid-m`, `.grid-l`, and `.grid-xl`, allow the grid to adapt to different screen sizes, starting with a single column on smaller viewports and expanding into a multi-column layout at larger ones.

```html
<div class="grid-s">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<div class="grid-m">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<div class="grid-l">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<div class="grid-xl">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
```

--------------------------------

### Stack Layout with Alignment Utilities

Source: https://kelpui.com/docs/layout/stack

Illustrates how to control the alignment of items within a `.stack` layout using the `.align-*` utility classes. By default, items stretch to fill the column, but this can be modified to align at the start, center, or end.

```html
<div class="stack align-start">
	<!-- ... -->
</div>

<div class="stack align-center">
	<!-- ... -->
</div>

<div class="stack align-end">
	<!-- ... -->
</div>
```

--------------------------------

### Style Disclosure Content with 'callout' Class

Source: https://kelpui.com/docs/components/details

This example demonstrates how to combine HTML <details> and <summary> elements with the 'callout' class to style the content within disclosure groups. It shows two variations: 'callout' and 'callout outline'.

```html
<details>
	<summary><strong>Callout Content</strong></summary>
	<div class="callout">
		The content.
	</div>
</details>

<div class="callout outline">
	<details>
		<summary><strong>Callout Wrapper</strong></summary>
		The content.
	</details>
</div>
```

--------------------------------

### Implement Component Colors with Semantic Variables

Source: https://kelpui.com/docs/customizing/css-variables

Demonstrates how Kelp components utilize semantic CSS variables for colors. The example shows the `.callout` component setting its background, text, and border colors using `--background-color`, `--color`, and `--border-color`, which are themselves defined by other semantic variables like `--color-fill-muted`.

```css
.callout {
	--background-color: var(--color-fill-muted);
	--color: var(--color-on-muted);
	--border-color: var(--color-border-muted);

	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	color: var(--color);
}
```

--------------------------------

### Listen for Kelp Tab Select Custom Event with JavaScript

Source: https://kelpui.com/docs/customizing/web-components

Shows how to attach an event listener to the `kelp-tabs:select` custom event. This example illustrates fetching and injecting content into a tab pane using AJAX the first time it's selected, preventing redundant loads.

```javascript
document.addEventListener('kelp-tabs:select', async (event) => {
	if (event.detail.pane.hasAttribute('is-loaded')) return;
	const request = await fetch('/path/to/content');
	const response = await request.text();
	event.detail.pane.innerHTML = response;
	event.detail.pane.setAttribute('is-loaded');
});
```

--------------------------------

### KelpUI Text Utility Classes Example (HTML)

Source: https://kelpui.com/docs/components/text

Illustrates how to use KelpUI utility classes to modify text size and color. These classes can be applied directly to text elements for quick styling adjustments without explicit CSS.

```html
You can use utility classes to adjust the size and color.
```

--------------------------------

### HTML Definition List Example for KelpUI

Source: https://kelpui.com/docs/components/lists

This snippet illustrates the standard HTML structure for a definition list (dl). It includes term (dt) and definition (dd) elements, commonly used for glossaries or metadata. No specific KelpUI components are required for this basic HTML structure.

```html
<dl>
    <dt>Definition List</dt>
    <dd>Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).</dd>

    <dt>Here's another term</dt>
    <dd>And here's the definition that would go with it.</dd>
</dl>
```

--------------------------------

### Show content when any checkbox is checked

Source: https://kelpui.com/docs/components/until-selected

This example shows how to control content visibility based on checkboxes. The `[target]` attribute is set to a CSS selector that targets all checkboxes within a specific container. The content within the `<kelp-until-selected>` component will only become visible if at least one of the targeted checkboxes is checked. This is ideal for multi-select options where any selection should reveal associated information.

```html
<fieldset>
	<legend>What's your favorite Pixar movie?</legend>
	<div id="pixar-movies">
		<label for="up">
			<input type="checkbox" id="up" name="movie" value="up">
			Up!
		</label>
		<label for="wall-e">
			<input type="checkbox" id="wall-e" name="movie" value="wall-e">
			WALL-E
		</label>
		<label for="toy-story">
			<input type="checkbox" id="toy-story" name="movie" value="toy-story">
			Toy Story
		</label>
	</div>
</fieldset>

<kelp-until-selected target="#pixar-movies [type='checkbox']">
	<div class="callout">
		I'm hidden unless a checkbox is checked.
	</div>
</kelp-until-selected>
```

--------------------------------

### Show content by default if control is pre-selected

Source: https://kelpui.com/docs/components/until-selected

This example illustrates how content can be visible by default if the controlling form element is already in a selected state when the component loads. The `checked` attribute is added to the checkbox, ensuring the content is shown immediately. This is useful for forms where certain options should be visible upfront based on initial user choices or pre-filled data.

```html
<label for="show-content">
	<input type="checkbox" id="show-content" checked>
	Show the content
</label>

<kelp-until-selected target="#show-content">
	<div class="callout">
		I'm hidden unless a checkbox is checked.
	</div>
</kelp-until-selected>
```

--------------------------------

### KelpUI: Using kelp-toc Methods (JavaScript)

Source: https://kelpui.com/docs/components/toc

Demonstrates how to access and use the `.render()` and `.init()` methods on a <kelp-toc> web component instance. These methods are useful for dynamic updates or manual initialization.

```javascript
const toc = document.querySelector('kelp-toc');

// Render a fresh table of contents
toc.render();

// Manually initialize the component
toc.init();

```

--------------------------------

### Adjusting Grid Gaps

Source: https://kelpui.com/docs/layout/grid

Modify the spacing between grid items using the `.gap-*` utility classes. Examples include `.gap-4xs` for smaller gaps and `.gap-6xl` for larger gaps.

```html
<div class="grid gap-4xs">
	<!-- ... -->
</div>

<div class="grid gap-6xl">
	<!-- ... -->
</div>
```

--------------------------------

### HTML: Implicitly Associated Label for Checkbox (Not Recommended)

Source: https://kelpui.com/docs/forms/label

Shows an example of an implicitly associated label where the label wraps the input element without a `for` attribute. This pattern can cause accessibility issues.

```html
<!-- Do NOT do this -->
<label>
	<input type="checkbox" name="awesome">
	I love Pixar movies
</label>
```

--------------------------------

### Redirect on Form Success (HTML)

Source: https://kelpui.com/docs/components/form-ajax

Implement automatic redirection after a successful form submission by using the `[redirect-on-success]` attribute with the target URL. This is useful for guiding users to specific pages post-submission.

```html
<kelp-form-ajax 
	redirect-on-success="/dashboard"
>
	<form action="/login" method="POST">
		<!-- ... -->
	</form>
</kelp-form-ajax>
```

--------------------------------

### Basic KelpUI Tabs Implementation

Source: https://kelpui.com/docs/components/tabs

Demonstrates the fundamental usage of the `<kelp-tabs>` web component by wrapping anchor links and their associated content. It shows how to apply custom classes for styling and ensures ARIA attributes and keyboard navigation are handled automatically.

```html
<kelp-tabs>
	<ul class="list-inline" tabs>
		<li><a href="#wizard">Wizard</a></li>
		<li><a href="#sorcerer">Sorcerer</a></li>
		<li><a href="#druid">Druid</a></li>
	</ul>

	<div class="callout outline" id="wizard">
		Wizards gain their magic through study...
	</div>

	<div class="callout outline" id="sorcerer">
		Sorcerers get their power from an otherworldly being...
	</div>

	<div class="callout outline" id="druid">
		Druids get their power from nature...
	</div>
</kelp-tabs>
```

--------------------------------

### Manual Initialization of kelp-autogrow

Source: https://kelpui.com/docs/components/textarea

This section describes how to manually initialize the `<kelp-autogrow>` web component using its `.init()` method, which can be useful if the component fails to self-instantiate.

```APIDOC
## Manual Initialization of `<kelp-autogrow>`

### Description
Web components typically self-instantiate. However, if the `<kelp-autogrow>` element fails to initialize automatically, you can use its `.init()` method to manually trigger the initialization process.

### Method
`init()`

### Endpoint
N/A (This is a JavaScript method for a web component)

### Parameters
This method does not accept any parameters.

### Request Example
```javascript
const autogrow = document.querySelector('kelp-autogrow');
autogrow.init();
```

### Response
This method does not return a value. Its purpose is to ensure the component is properly initialized.

#### Success Response (N/A)
N/A

#### Response Example
N/A
```

--------------------------------

### Direct Download - Kelp UI

Source: https://kelpui.com/docs/getting-started/installation

Integrate Kelp UI by downloading the CSS and JavaScript files directly from the repository. This approach involves linking to local files within your project structure.

```html
<link rel="stylesheet" href="./css/kelp.css">
<script type="module" src="./js/kelp.js"></script>
```

--------------------------------

### Kelp UI Spinner Sizes

Source: https://kelpui.com/docs/components/spinner

Illustrates how to adjust the size of a Kelp UI spinner using the `.size-*` utility classes. Examples show extra-small (xs), medium (m), and extra-extra-extra-large (4xl) sizes.

```html
<div class="spinner size-xs" fallback="⏳"></div>
<div class="spinner size-m" fallback="⏳"></div>
<div class="spinner size-4xl" fallback="⏳"></div>
```

--------------------------------

### JavaScript Method to Initialize Component

Source: https://kelpui.com/docs/components/heading-anchors

This JavaScript snippet shows how to manually initialize the `<kelp-heading-anchors>` web component using its `.init()` method. This is useful if the component fails to self-instantiate.

```javascript
const headingAnchors = document.querySelector('kelp-heading-anchors');
headingAnchors.init();


```

--------------------------------

### Conditional Form Submission with `[formmethod='dialog']`

Source: https://kelpui.com/docs/components/dialog

This example shows a form within a dialog where a 'Cancel' button uses `[formmethod='dialog']` to close the dialog without submitting the form, while the 'Submit' button proceeds with the form submission.

```html
<dialog>
	<form action="/login">
		<label for="username">Username</label>
		<input type="text" id="username" name="username">

		<button>Submit</button>
		<button formmethod="dialog">Cancel</button>
	</form>
</dialog>

```

--------------------------------

### Nav Bar Icon Logo - HTML

Source: https://kelpui.com/docs/components/navbar

Provides an example of using an inline SVG as a logo within the navbar. Setting `fill="currentColor"` allows the SVG to inherit color changes on hover.

```html
<nav class="navbar">
	<a 
		class="logo" 
		href="#" 
		aria-label="Go Make Things"
	>
		<svg 
			fill="currentColor" 
			height="1.2em" 
			width="1.2em" 
			viewBox="0 0 16 16" 
			aria-hidden="true"
			xmlns="http://www.w3.org/2000/svg" 
		>
			<path d="M14 9v2.066c-1.258 1.285-3.016 2.526-5 2.852V8.001h3v-1L9 5.83A3.001 3.001 0 0 0 8 .001 3 3 0 0 0 7 5.83L4 7.001v1h3v5.917c-1.984-.326-3.742-1.567-5-2.852V9H0v1c0 2 4 6 8 6s8-4 8-6V9h-2zM9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
		</svg>
	</a>
	<ul>
		<!-- ... -->
	</ul>
</nav>
```

--------------------------------

### KelpUI Select: Basic Usage (HTML)

Source: https://kelpui.com/docs/components/select

Demonstrates the basic usage of the KelpUI Select component by creating a dropdown menu with options. It requires a <label> and <select> element, with each option defined using <option> tags.

```html
<label for="wizard">Who is the best wizard?</label>
<select id="wizard" name="wizard">
	<option>Merlin</option>
	<option>Gandalf</option>
	<option>Radagast</option>
</select>
```

--------------------------------

### Controlling Navbar Width with Containers

Source: https://kelpui.com/docs/components/navbar

Explains how to control the width of the `.navbar` component by nesting it within Kelp UI's `.container` classes. Examples show how to make the navbar very wide (`.container-2xl`) or quite narrow (`.container-s`).

```html
<!-- A very wide navbar -->
<header class="container-2xl">
	<nav class="navbar">
		<!-- ... -->
	</nav>
</header>

<!-- A rather narrow navbar -->
<header class="container-s">
	<nav class="navbar">
		<!-- ... -->
	</nav>
</header>
```

--------------------------------

### Kelp UI Grid System: Fraction-Based Columns

Source: https://kelpui.com/docs/layout/grid

Demonstrates the usage of Kelp UI's fraction-based column classes for creating responsive grid layouts. These classes define column widths as fractions of the total 12 columns, facilitating easier layout design and responsiveness. The system is mobile-first, with specific classes for different breakpoint sizes.

```html
<div class="grid">
	<div class="item-third">.item-third</div>
	<div class="item-two-thirds">.item-two-thirds</div>
</div>

<div class="grid">
	<div class="item-fourth">.item-fourth</div>
	<div class="item-three-fourths">.item-three-fourths</div>
</div>

<div class="grid">
	<div class="item-half">.item-half</div>
	<div class="item-half">.item-half</div>
</div>

<div class="grid">
	<div class="item-fourth">.item-fourth</div>
	<div class="item-half">.item-half</div>
	<div class="item-fourth">.item-fourth</div>
</div>
```

--------------------------------

### Basic File Input HTML

Source: https://kelpui.com/docs/components/file-picker

Demonstrates how to create a basic file input element using an HTML label and input tag with type 'file'. This is the foundational step for enabling file selection in web forms.

```html
<label for="file">Choose a File</label>
<input type="file" id="file" name="file">
```

--------------------------------

### Web Component Show Until Ready

Source: https://kelpui.com/docs/utilities/visibility

Provides fallback content for Web Components that is hidden once the component is ready. Elements with '[show-until-ready]' are initially visible and then hidden when the component gains the '[is-ready]' attribute.

```html
<kelp-disclosure target="#content" hide-until-ready>
	<a href="/fallback-link" show-until-ready>Learn more</a>
	<button>Show More</button>
</kelp-disclosure>
```

--------------------------------

### Stack Layout with Gap Utilities

Source: https://kelpui.com/docs/layout/stack

Shows how to adjust the spacing between items in a `.stack` layout using the `.gap-*` utility classes. This leverages the `display: flex` property inherent to the `.stack` class.

```html
<div class="stack gap-4xs">
	<!-- ... -->
</div>

<div class="stack gap-6xl">
	<!-- ... -->
</div>
```

--------------------------------

### Manually Initialize kelp-select-all Component (JavaScript)

Source: https://kelpui.com/docs/components/select-all

If the kelp-select-all web component fails to initialize automatically, it can be manually initialized using its .init() method. This ensures the component is ready for use.

```javascript
const selectAll = document.querySelector('kelp-select-all');
selectAll.init();
```

--------------------------------

### HTML for Default Selected Radio Button

Source: https://kelpui.com/docs/components/radio

This example shows how to set a radio button to be selected by default using the 'checked' attribute. If multiple radio buttons in the same group have this attribute, the last one in the HTML document will be the one that is selected.

```html
<label for="up">
	<input type="radio" id="up" name="movie" value="up">
	Up!
</label>
<label for="wall-e">
	<input type="radio" id="wall-e" name="movie" value="wall-e" checked>
	WALL-E
</label>
<label for="toy-story">
	<input type="radio" id="toy-story" name="movie" value="toy-story">
	Toy Story
</label>
```

--------------------------------

### Initialize kelp-autogrow Element with JavaScript

Source: https://kelpui.com/docs/components/textarea

This snippet demonstrates how to select a `<kelp-autogrow>` element using `document.querySelector` and then manually initialize it using its `.init()` method. This is a fallback mechanism for cases where the component might not instantiate automatically. No external dependencies are required.

```javascript
const autogrow = document.querySelector('kelp-autogrow');
autogrow.init();
```

--------------------------------

### Sidecar Layout: Adjusting Vertical Alignment (HTML)

Source: https://kelpui.com/docs/layout/sidecar

Explains how to control the vertical alignment of items within a `.sidecar` or `.sidecar-end` layout using Kelp UI's `.align-*` utility classes. Examples include `.align-start`, `.align-center`, and `.align-end`.

```html
<div class="sidecar align-start">
	<!-- ... -->
</div>

<div class="sidecar align-center">
	<!-- ... -->
</div>

<div class="sidecar align-end">
	<!-- ... -->
</div>
```

--------------------------------

### HTML Switch Component - Basic Usage

Source: https://kelpui.com/docs/components/switch

Demonstrates how to create a basic switch component using an HTML checkbox with the `role='switch'` attribute. This allows users to toggle an option on or off.

```html
<label for="magic">
	<input 
		type="checkbox" 
		name="magic" 
		id="magic" 
		role="switch"
	>
	Allow magic
</label>
```

--------------------------------

### Sidecar Layout: Adjusting Gap with Utility Classes (HTML)

Source: https://kelpui.com/docs/layout/sidecar

Shows how to modify the space between elements in a `.sidecar` layout using Kelp UI's `.gap-*` utility classes. This example demonstrates using `.gap-4xs` and `.gap-6xl` for different spacing.

```html
<div class="sidecar gap-4xs">
	<!-- ... -->
</div>

<div class="sidecar gap-6xl">
	<!-- ... -->
</div>
```

--------------------------------

### Form Layout with Grid (HTML)

Source: https://kelpui.com/docs/forms/layout

Demonstrates how to structure form elements using Kelp UI's grid system for responsive layouts. It utilizes classes like `.grid-m` and `.item-half` to create a two-column form on medium viewports and larger. Input fields and labels are styled to take full width by default within their containers.

```html
<form>
	<div class="grid-m">
		<div class="item-half margin-end-2xs">
			<label for="fname">First Name</label>
			<input type="text" id="fname" name="fname">
		</div>
		<div class="item-half margin-end-2xs">
			<label for="lname">Last Name</label>
			<input type="text" id="lname" name="lname">
		</div>
	</div>
	<button class="primary">Submit</button>
</form>
```

--------------------------------

### Action Header Component in HTML

Source: https://kelpui.com/docs/layout/action-header

The .action-header class is used to create a dismissable header layout within elements like modals or drawers. It ensures an action button (e.g., a close button) remains inline with the heading. This example demonstrates its usage within a dialog element.

```html
<dialog>
	<div class="action-header">
		<h2>This is a modal heading</h2>
		<form>
			<button 
				class="plain"
				formmethod="dialog"
				aria-label="Close Modal"
			>
				&#x2715;
			</button>
		</form>
	</div>
	<!-- ... -->
</dialog>
```

--------------------------------

### Mixing Button Styles in HTML

Source: https://kelpui.com/docs/forms/buttons

Demonstrates how to use standard buttons alongside buttons styled as links, leveraging the `.link` class to maintain consistent spacing and alignment. The input consists of standard and link-styled buttons.

```html
<button>Join Now</button>
<button class="link">Or learn more...</button>
```

--------------------------------

### Basic Skeleton Component (HTML)

Source: https://kelpui.com/docs/components/skeleton

This snippet demonstrates the basic usage of the skeleton component by applying the `.skeleton` class to a div element. This creates a pulsing placeholder for content that is not yet loaded.

```html
<div class="skeleton"></div>
```

--------------------------------

### Cluster Layout with Gap - HTML

Source: https://kelpui.com/docs/layout/cluster

Shows how to adjust the spacing between items in a `.cluster` layout using the `.gap-*` utility classes. The `.cluster` class uses `display: flex` internally.

```html
<div class="cluster gap-4xs">
	<!-- ... -->
</div>

<div class="cluster gap-6xl">
	<!-- ... -->
</div>
```

--------------------------------

### Styled File Input with Kelp UI Classes

Source: https://kelpui.com/docs/components/file-picker

Shows how to style the file input's upload button using Kelp UI utility classes. By applying classes like 'size-2xs', 'vivid', and 'secondary' directly to the input element, you can customize its appearance.

```html
<label for="file">
<input 
	class="size-2xs vivid secondary"
	type="file"
	id="file"
	name="file">

```

--------------------------------

### Modal with Autofocus on Specific Element

Source: https://kelpui.com/docs/components/dialog

Demonstrates how to use the `[autofocus]` attribute to set the initial focus on a specific interactive element when a modal opens. This overrides the default behavior where the first interactive element receives focus. The example shows autofocus on an input field within a login form.

```html
<dialog>
	<div class="action-header">
		<h2>Login</h2>
		<form method="dialog">
			<button class="plain" aria-label="Close Modal">
				&#x2715;
			</button>
		</form>
	</div>

	<form action="/login">
		<label for="username">Username</label>
		<input 
			type="text" 
			id="username" 
			name="username"
			autofocus
		>

		<button>Submit</button>
		<button formmethod="dialog">Cancel</button>
	</form>
</dialog>
```

--------------------------------

### Styling Links as Buttons in Navbar

Source: https://kelpui.com/docs/components/navbar

Demonstrates how to style navigation links as call-to-action buttons using the `.btn` class combined with color and style modifiers. This is useful for highlighting important actions within a navigation menu.

```html
<nav class="navbar">
	<a class="logo" href="#">Kelp UI</a>
	<ul>
		<!-- ... -->
		<li><a class="btn secondary" href="#">Join</a></li>
	</ul>
</nav>
```

--------------------------------

### HUG CSS: Classless HTML Styling

Source: https://kelpui.com/docs/getting-started/principles

Demonstrates KelpUI's classless HUG CSS approach where core styles are applied to native HTML elements without requiring custom classes. This ensures a cohesive design system out-of-the-box.

```html
<h1>Hello world!</h1>
<p>How are you today?</p>

<button>Say Hi</button>
```

--------------------------------

### Modal Width Control with .dialog-* Classes

Source: https://kelpui.com/docs/components/dialog

Explains how to control the width of modals and drawers using predefined KelpUI CSS classes. The default width is 32em, and examples like .dialog-xs, .dialog-s, .dialog-l, .dialog-xl, and .dialog-full are provided for various sizing options. The .dialog-full class also affects height.

```css
/* Example usage of width classes */
.dialog-xs { width: 22em; }
.dialog-s { width: 26em; }
.dialog-l { width: 40em; }
.dialog-xl { width: 52em; }
.dialog-full { width: 100%; height: 100%; }
```

--------------------------------

### Basic Callout Usage - HTML

Source: https://kelpui.com/docs/components/callouts

Demonstrates the fundamental usage of the `.callout` class to create a basic informational alert box. This class applies default styling for callouts.

```html
<div class="callout">
	This is a callout.
</div>
```
Tokens:
Raw