@ulu/frontend
Version:
A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.
5,711 lines • 111 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
ui/theme-toggle
</title>
<meta name="description" content="Modular Sass Theming Library">
<meta name="generator" content="Eleventy v3.0.0">
<link rel="apple-touch-icon" sizes="180x180" href="/frontend/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/frontend/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/frontend/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/frontend/assets/favicons/site.webmanifest">
<link rel="mask-icon" href="/frontend/assets/favicons/safari-pinned-tab.svg" color="#8455bd">
<link rel="shortcut icon" href="/frontend/assets/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/frontend/assets/fonts/inter/inter.css">
</head>
<body class="page theme-light">
<header class="page__header header">
<a href="#main" class="skip-link hidden-visually-focusable">
Skip to main content
</a>
<div class="header__main">
<a class="header__logo" href="/frontend/">
<div class="logo">
<span class="logo__main">Ulu</span>
<span class="logo__subtitle">Frontend</span>
</div>
</a>
<button class="header__mobile-toggle hidden-min-medium button button--icon button--secondary" data-ulu-dialog-trigger="mobile-menu" aria-label="Open Menu">
<span class="fas fa-bars" aria-hidden="true"></span>
</button>
</div>
<nav class="header__nav">
<h2 class="hidden-visually">Main Menu</h2>
<div class="header__nav-links">
<button class="button button--small button--icon button--icon-small" data-ulu-theme-toggle='{
"savePreference" : true,
"checkMediaQuery" : true,
"group" : "page"
}'>
<span class="hidden-visually">Toggle Theme to <span data-ulu-theme-toggle-label="">Dark</span></span>
<span class="fas fa-moon" data-ulu-theme-toggle-icon=""></span>
</button>
<a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend" aria-label="View on Github">
<span class="fab fa-github" aria-hidden="true"></span>
</a>
<a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend">
<span class="fab fa-npm" aria-hidden="true"></span>
</a>
</div>
<div class="header__nav-menu">
<ul class="nav-tree" data-menu-depth="1">
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
<span class="nav-tree__text">
Guide
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
<span class="nav-tree__text">
Building a Stylesheet
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
<span class="nav-tree__text">
Developing Ulu SCSS Module
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
<span class="nav-tree__text">
Demos
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/basic-hero/">
<span class="nav-tree__text">
Basic Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
<span class="nav-tree__text">
Breakpoint Manager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-group/">
<span class="nav-tree__text">
Button Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-verbose/">
<span class="nav-tree__text">
Button Verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
<span class="nav-tree__text">
Captioned Figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card-grid/">
<span class="nav-tree__text">
Card Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/counter-list/">
<span class="nav-tree__text">
Counter List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/css-icons/">
<span class="nav-tree__text">
CSS Icons
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-grid/">
<span class="nav-tree__text">
Data grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-table/">
<span class="nav-tree__text">
Data Table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/details-group/">
<span class="nav-tree__text">
Details Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/file-save/">
<span class="nav-tree__text">
File Save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/flipcard/">
<span class="nav-tree__text">
Flip Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/form-theme/">
<span class="nav-tree__text">
Form Theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/headline-label/">
<span class="nav-tree__text">
Headline Label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/image-grid/">
<span class="nav-tree__text">
Image Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-inline/">
<span class="nav-tree__text">
List Inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-lines/">
<span class="nav-tree__text">
List Lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/menu-stack/">
<span class="nav-tree__text">
Menu Stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/modals/">
<span class="nav-tree__text">
Modals
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/nav-strip/">
<span class="nav-tree__text">
Nav Strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/overlay-section/">
<span class="nav-tree__text">
Overlay Section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/popovers/">
<span class="nav-tree__text">
Popovers
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/pull-quote/">
<span class="nav-tree__text">
Pull Quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
<span class="nav-tree__text">
Scroll Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
<span class="nav-tree__text">
Scrollpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
<span class="nav-tree__text">
Spoke Spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/sticky-list/">
<span class="nav-tree__text">
Sticky List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/theme-toggle/">
<span class="nav-tree__text">
Theme Toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
<span class="nav-tree__text">
Tile Grid Overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tiles/">
<span class="nav-tree__text">
Tiles
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tooltip/">
<span class="nav-tree__text">
Tooltip
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
<span class="nav-tree__text">
Sass API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Core
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
<span class="nav-tree__text">
Breakpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
<span class="nav-tree__text">
Cssvar
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/element/">
<span class="nav-tree__text">
Element
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/path/">
<span class="nav-tree__text">
Path
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/selector/">
<span class="nav-tree__text">
Selector
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/utils/">
<span class="nav-tree__text">
Utils
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Base
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/elements/">
<span class="nav-tree__text">
Elements
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
<span class="nav-tree__text">
Keyframes
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/normalize/">
<span class="nav-tree__text">
Normalize
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/root/">
<span class="nav-tree__text">
Root
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Components
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
<span class="nav-tree__text">
Adaptive-spacing
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
<span class="nav-tree__text">
Basic-hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-group/">
<span class="nav-tree__text">
Button-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
<span class="nav-tree__text">
Button-verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
<span class="nav-tree__text">
Captioned-figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
<span class="nav-tree__text">
Card-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
<span class="nav-tree__text">
Counter-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
<span class="nav-tree__text">
Css-icon
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
<span class="nav-tree__text">
Data-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-table/">
<span class="nav-tree__text">
Data-table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
<span class="nav-tree__text">
Fill-context
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
<span class="nav-tree__text">
Flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
<span class="nav-tree__text">
Flipcard-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
<span class="nav-tree__text">
Form-theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/headline-label/">
<span class="nav-tree__text">
Headline-label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
<span class="nav-tree__text">
Horizontal-rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
<span class="nav-tree__text">
Image-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/links/">
<span class="nav-tree__text">
Links
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
<span class="nav-tree__text">
List-inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
<span class="nav-tree__text">
List-lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
<span class="nav-tree__text">
List-ordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
<span class="nav-tree__text">
List-unordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
<span class="nav-tree__text">
Menu-stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/modal/">
<span class="nav-tree__text">
Modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
<span class="nav-tree__text">
Nav-strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
<span class="nav-tree__text">
Overlay-section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pager/">
<span class="nav-tree__text">
Pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
<span class="nav-tree__text">
Placeholder-block
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/popover/">
<span class="nav-tree__text">
Popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
<span class="nav-tree__text">
Pull-quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
<span class="nav-tree__text">
Ratio-box
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
<span class="nav-tree__text">
Scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
<span class="nav-tree__text">
Skip-link
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
<span class="nav-tree__text">
Spoke-spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/sticky-list/">
<span class="nav-tree__text">
Sticky-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/table-sticky/">
<span class="nav-tree__text">
Table-sticky
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
<span class="nav-tree__text">
Tile-button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
<span class="nav-tree__text">
Tile-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
<span class="nav-tree__text">
Tile-grid-overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/vignette/">
<span class="nav-tree__text">
Vignette
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
<span class="nav-tree__text">
Wysiwyg
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Helpers
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/display/">
<span class="nav-tree__text">
Display
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
<span class="nav-tree__text">
Utilities
</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
<span class="nav-tree__text">
Javascript API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/javascript/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/events/">
<span class="nav-tree__text">
events
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/settings/">
<span class="nav-tree__text">
settings
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
<span class="nav-tree__text">
ui/breakpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
<span class="nav-tree__text">
ui/collapsible
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
<span class="nav-tree__text">
ui/details-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
<span class="nav-tree__text">
ui/dialog
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
<span class="nav-tree__text">
ui/flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
<span class="nav-tree__text">
ui/grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
<span class="nav-tree__text">
ui/modal-builder
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
<span class="nav-tree__text">
ui/overflow-scroller
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
<span class="nav-tree__text">
ui/overflow-scroller-pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-page/">
<span class="nav-tree__text">
ui/page
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
<span class="nav-tree__text">
ui/popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print/">
<span class="nav-tree__text">
ui/print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
<span class="nav-tree__text">
ui/print-details
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
<span class="nav-tree__text">
ui/programmatic-modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
<span class="nav-tree__text">
ui/proxy-click
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
<span class="nav-tree__text">
ui/resizer
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
<span class="nav-tree__text">
ui/scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
<span class="nav-tree__text">
ui/scrollpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
<span class="nav-tree__text">
ui/slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
<span class="nav-tree__text">
ui/tabs
</span>
</a>
</li>
<li class="nav-tree__item is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/javascript/ui-theme-toggle/" aria-current="page">
<span class="nav-tree__text">
ui/theme-toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
<span class="nav-tree__text">
ui/tooltip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
<span class="nav-tree__text">
utils/class-logger
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-css/">
<span class="nav-tree__text">
utils/css
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
<span class="nav-tree__text">
utils/dom
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
<span class="nav-tree__text">
utils/file-save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
<span class="nav-tree__text">
utils/floating-ui
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-id/">
<span class="nav-tree__text">
utils/id
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
<span class="nav-tree__text">
utils/pause-youtube-video
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-system/">
<span class="nav-tree__text">
utils/system
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item nav-tree__item--separator-before">
<a class="nav-tree__link " href="/frontend/changelog/">
<span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
<span class="nav-tree__text">
Changelog
</span>
</a>
</li>
</ul>
</div>
<div id="mobile-menu" data-ulu-modal-builder='{
"title" : "Menu",
"position" : "right"
}'>
<ul class="nav-tree" data-menu-depth="1">
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
<span class="nav-tree__text">
Guide
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
<span class="nav-tree__text">
Building a Stylesheet
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
<span class="nav-tree__text">
Developing Ulu SCSS Module
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
<span class="nav-tree__text">
Demos
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/basic-hero/">
<span class="nav-tree__text">
Basic Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
<span class="nav-tree__text">
Breakpoint Manager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-group/">
<span class="nav-tree__text">
Button Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-verbose/">
<span class="nav-tree__text">
Button Verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
<span class="nav-tree__text">
Captioned Figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card-grid/">
<span class="nav-tree__text">
Card Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/counter-list/">
<span class="nav-tree__text">
Counter List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/css-icons/">
<span class="nav-tree__text">
CSS Icons
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-grid/">
<span class="nav-tree__text">
Data grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-table/">
<span class="nav-tree__text">
Data Table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/details-group/">
<span class="nav-tree__text">
Details Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/file-save/">
<span class="nav-tree__text">
File Save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/flipcard/">
<span class="nav-tree__text">
Flip Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/form-theme/">
<span class="nav-tree__text">
Form Theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/headline-label/">
<span class="nav-tree__text">
Headline Label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/image-grid/">
<span class="nav-tree__text">
Image Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-inline/">
<span class="nav-tree__text">
List Inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-lines/">
<span class="nav-tree__text">
List Lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/menu-stack/">
<span class="nav-tree__text">
Menu Stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/modals/">
<span class="nav-tree__text">
Modals
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/nav-strip/">
<span class="nav-tree__text">
Nav Strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/overlay-section/">
<span class="nav-tree__text">
Overlay Section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/popovers/">
<span class="nav-tree__text">
Popovers
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/pull-quote/">
<span class="nav-tree__text">
Pull Quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
<span class="nav-tree__text">
Scroll Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
<span class="nav-tree__text">
Scrollpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
<span class="nav-tree__text">
Spoke Spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/sticky-list/">
<span class="nav-tree__text">
Sticky List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/theme-toggle/">
<span class="nav-tree__text">
Theme Toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
<span class="nav-tree__text">
Tile Grid Overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tiles/">
<span class="nav-tree__text">
Tiles
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tooltip/">
<span class="nav-tree__text">
Tooltip
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
<span class="nav-tree__text">
Sass API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Core
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
<span class="nav-tree__text">
Breakpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
<span class="nav-tree__text">
Cssvar
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/element/">
<span class="nav-tree__text">
Element
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/path/">
<span class="nav-tree__text">
Path
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/selector/">
<span class="nav-tree__text">
Selector
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/utils/">
<span class="nav-tree__text">
Utils
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Base
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/elements/">
<span class="nav-tree__text">
Elements
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
<span class="nav-tree__text">
Keyframes
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/normalize/">
<span class="nav-tree__text">
Normalize
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/root/">
<span class="nav-tree__text">
Root
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Components
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
<span class="nav-tree__text">
Adaptive-spacing
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
<span class="nav-tree__text">
Basic-hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-group/">
<span class="nav-tree__text">
Button-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
<span class="nav-tree__text">
Button-verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
<span class="nav-tree__text">
Captioned-figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
<span class="nav-tree__text">
Card-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
<span class="nav-tree__text">
Counter-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
<span class="nav-tree__text">
Css-icon
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
<span class="nav-tree__text">
Data-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-table/">
<span class="nav-tree__text">
Data-table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
<span class="nav-tree__text">
Fill-context
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
<span class="nav-tree__text">
Flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
<span class="nav-tree__text">
Flipcard-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
<span class="nav-tree__text">
Form-theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/headline-label/">
<span class="nav-tree__text">
Headline-label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
<span class="nav-tree__text">
Horizontal-rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
<span class="nav-tree__text">
Image-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/links/">
<span class="nav-tree__text">
Links
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
<span class="nav-tree__text">
List-inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
<span class="nav-tree__text">
List-lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
<span class="nav-tree__text">
List-ordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
<span class="nav-tree__text">
List-unordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
<span class="nav-tree__text">
Menu-stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/modal/">
<span class="nav-tree__text">
Modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
<span class="nav-tree__text">
Nav-strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
<span class="nav-tree__text">
Overlay-section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pager/">
<span class="nav-tree__text">
Pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
<span class="nav-tree__text">
Placeholder-block
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/popover/">
<span class="nav-tree__text">
Popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
<span class="nav-tree__text">
Pull-quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
<span class="nav-tree__text">
Ratio-box
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
<span class="nav-tree__text">
Scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
<span class="nav-tree__text">
Skip-link
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
<span class="nav-tree__text">
Spoke-spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/sticky-list/">
<span class="nav-tree__text">
Sticky-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/table-sticky/">
<span class="nav-tree__text">
Table-sticky
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
<span class="nav-tree__text">
Tile-button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
<span class="nav-tree__text">
Tile-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
<span class="nav-tree__text">
Tile-grid-overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/vignette/">
<span class="nav-tree__text">
Vignette
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
<span class="nav-tree__text">
Wysiwyg
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Helpers
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/display/">
<span class="nav-tree__text">
Display
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
<span class="nav-tree__text">
Utilities
</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
<span class="nav-tree__text">
Javascript API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/javascript/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/events/">
<span class="nav-tree__text">
events
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/settings/">
<span class="nav-tree__text">
settings
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
<span class="nav-tree__text">
ui/breakpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
<span class="nav-tree__text">
ui/collapsible
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
<span class="nav-tree__text">
ui/details-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
<span class="nav-tree__text">
ui/dialog
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
<span class="nav-tree__text">
ui/flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
<span class="nav-tree__text">
ui/grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
<span class="nav-tree__text">
ui/modal-builder
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
<span class="nav-tree__text">
ui/overflow-scroller
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
<span class="nav-tree__text">
ui/overflow-scroller-pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-page/">
<span class="nav-tree__text">
ui/page
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
<span class="nav-tree__text">
ui/popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print/">
<span class="nav-tree__text">
ui/print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
<span class="nav-tree__text">
ui/print-details
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
<span class="nav-tree__text">
ui/programmatic-modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
<span class="nav-tree__text">
ui/proxy-click
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
<span class="nav-tree__text">
ui/resizer
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
<span class="nav-tree__text">
ui/scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
<span class="nav-tree__text">
ui/scrollpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
<span class="nav-tree__text">
ui/slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
<span class="nav-tree__text">
ui/tabs
</span>
</a>
</li>
<li class="nav-tree__item is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/javascript/ui-theme-toggle/" aria-current="page">
<span class="nav-tree__text">
ui/theme-toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
<span class="nav-tree__text">
ui/tooltip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
<span class="nav-tree__text">
utils/class-logger
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-css/">
<span class="nav-tree__text">
utils/css
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
<span class="nav-tree__text">
utils/dom
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
<span class="nav-tree__text">
utils/file-save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
<span class="nav-tree__text">
utils/floating-ui
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-id/">
<span class="nav-tree__text">
utils/id
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
<span class="nav-tree__text">
utils/pause-youtube-video
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-system/">
<span class="nav-tree__text">
utils/system
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item nav-tree__item--separator-before">
<a class="nav-tree__link " href="/frontend/changelog/">
<span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
<span class="nav-tree__text">
Changelog
</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="page__toc page-toc">
<h2>Jump To:</h2>
<div class="toc">
<ol>
<li><a href="#ui%2Ftheme-toggle.initializer">ui/theme-toggle.initializer</a>
</li>
<li><a href="#ui%2Ftheme-toggle.defaults">ui/theme-toggle.defaults</a>
</li>
<li><a href="#ui%2Ftheme-toggle.setdefaults(options)">ui/theme-toggle.setDefaults(options)</a>
</li>
<li><a href="#ui%2Ftheme-toggle.init()">ui/theme-toggle.init()</a>
</li>
<li><a href="#ui%2Ftheme-toggle.setuptoggle(toggle)">ui/theme-toggle.setupToggle(toggle)</a>
<ol>
<li><a href="#setuptoggle~togglestate()">setupToggle~toggleState()</a>
</li>
<li><a href="#setuptoggle~ontoggleclick()">setupToggle~onToggleClick()</a>
</li>
<li><a href="#setuptoggle~attachremotes()">setupToggle~attachRemotes()</a>
</li>
<li><a href="#setuptoggle~cleanupremotes()">setupToggle~cleanupRemotes()</a>
</li>
<li><a href="#setuptoggle~destroy()">setupToggle~destroy()</a>
</li>
</ol>
</li>
<li><a href="#ui%2Ftheme-toggle~setstate()">ui/theme-toggle~setState()</a>
</li>
<li><a href="#ui%2Ftheme-toggle~resolveinitial()-%E2%87%92-string">ui/theme-toggle~resolveInitial() ⇒ String</a>
</li>
<li><a href="#ui%2Ftheme-toggle~getmatchingthemequery()-%E2%87%92-string">ui/theme-toggle~getMatchingThemeQuery() ⇒ String</a>
</li>
<li><a href="#ui%2Ftheme-toggle~getnextthemekey()">ui/theme-toggle~getNextThemeKey()</a>
</li>
<li><a href="#ui%2Ftheme-toggle~getotherthemes()">ui/theme-toggle~getOtherThemes()</a>
</li>
<li><a href="#ui%2Ftheme-toggle~concatthemeclasses()">ui/theme-toggle~concatThemeClasses()</a>
</li>
<li><a href="#ui%2Ftheme-toggle~getstoragekey()">ui/theme-toggle~getStorageKey()</a>
</li>
</ol>
</div>
</div>
<main id="main" class="page__body">
<div class="page__body-top container api-docs">
<div class="wysiwyg">
<p><a name="module_ui/theme-toggle"></a></p>
<h1 id="ui%2Ftheme-toggle" tabindex="-1">ui/theme-toggle</h1>
<ul>
<li><a href="#module_ui/theme-toggle">ui/theme-toggle</a>
<ul>
<li><em>static</em>
<ul>
<li><a href="#module_ui/theme-toggle.initializer">.initializer</a></li>
<li><a href="#module_ui/theme-toggle.defaults">.defaults</a></li>
<li><a href="#module_ui/theme-toggle.setDefaults">.setDefaults(options)</a></li>
<li><a href="#module_ui/theme-toggle.init">.init()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle">.setupToggle(toggle)</a>
<ul>
<li><a href="#module_ui/theme-toggle.setupToggle..toggleState">~toggleState()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..onToggleClick">~onToggleClick()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..attachRemotes">~attachRemotes()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..cleanupRemotes">~cleanupRemotes()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..destroy">~destroy()</a></li>
</ul>
</li>
</ul>
</li>
<li><em>inner</em>
<ul>
<li><a href="#module_ui/theme-toggle..setState">~setState()</a></li>
<li><a href="#module_ui/theme-toggle..resolveInitial">~resolveInitial()</a> ⇒ <code>String</code></li>
<li><a href="#module_ui/theme-toggle..getMatchingThemeQuery">~getMatchingThemeQuery()</a> ⇒ <code>String</code></li>
<li><a href="#module_ui/theme-toggle..getNextThemeKey">~getNextThemeKey()</a></li>
<li><a href="#module_ui/theme-toggle..getOtherThemes">~getOtherThemes()</a></li>
<li><a href="#module_ui/theme-toggle..concatThemeClasses">~concatThemeClasses()</a></li>
<li><a href="#module_ui/theme-toggle..getStorageKey">~getStorageKey()</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<p><a name="module_ui/theme-toggle.initializer"></a></p>
<h2 id="ui%2Ftheme-toggle.initializer" tabindex="-1">ui/theme-toggle.initializer</h2>
<p>Theme Toggle Component Initializer</p>
<p><strong>Kind</strong>: static constant of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<a name="module_ui/theme-toggle.defaults"></a></p>
<h2 id="ui%2Ftheme-toggle.defaults" tabindex="-1">ui/theme-toggle.defaults</h2>
<p>Default Options</p>
<ul>
<li>Can be overridden using data-attributes</li>
</ul>
<p><strong>Kind</strong>: static constant of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<a name="module_ui/theme-toggle.setDefaults"></a></p>
<h2 id="ui%2Ftheme-toggle.setdefaults(options)" tabindex="-1">ui/theme-toggle.setDefaults(options)</h2>
<p><strong>Kind</strong>: static method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a></p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>options</td>
<td><code>Object</code></td>
<td>Change options used as default for dialogs, can then be overridden by data attribute settings on element</td>
</tr>
</tbody>
</table>
<p><a name="module_ui/theme-toggle.init"></a></p>
<h2 id="ui%2Ftheme-toggle.init()" tabindex="-1">ui/theme-toggle.init()</h2>
<p>Initialize everything in document</p>
<ul>
<li>This will only initialize elements once, it is safe to call on page changes</li>
</ul>
<p><strong>Kind</strong>: static method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<a name="module_ui/theme-toggle.setupToggle"></a></p>
<h2 id="ui%2Ftheme-toggle.setuptoggle(toggle)" tabindex="-1">ui/theme-toggle.setupToggle(toggle)</h2>
<p>Sets up a single toggle</p>
<p><strong>Kind</strong>: static method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a></p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td><code>HTMLElement</code></td>
<td>A toggle to be setup</td>
</tr>
</tbody>
</table>
<ul>
<li><a href="#module_ui/theme-toggle.setupToggle">.setupToggle(toggle)</a>
<ul>
<li><a href="#module_ui/theme-toggle.setupToggle..toggleState">~toggleState()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..onToggleClick">~onToggleClick()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..attachRemotes">~attachRemotes()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..cleanupRemotes">~cleanupRemotes()</a></li>
<li><a href="#module_ui/theme-toggle.setupToggle..destroy">~destroy()</a></li>
</ul>
</li>
</ul>
<p><a name="module_ui/theme-toggle.setupToggle..toggleState"></a></p>
<h3 id="setuptoggle~togglestate()" tabindex="-1">setupToggle~toggleState()</h3>
<p>Instance function to get the next theme in cycle</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle.setupToggle"><code>setupToggle</code></a><br>
<a name="module_ui/theme-toggle.setupToggle..onToggleClick"></a></p>
<h3 id="setuptoggle~ontoggleclick()" tabindex="-1">setupToggle~onToggleClick()</h3>
<p>Handler for click for both toggle and remote toggles</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle.setupToggle"><code>setupToggle</code></a><br>
<a name="module_ui/theme-toggle.setupToggle..attachRemotes"></a></p>
<h3 id="setuptoggle~attachremotes()" tabindex="-1">setupToggle~attachRemotes()</h3>
<p>Utility to attach remote handlers</p>
<ul>
<li>Used initially and when page is modified</li>
</ul>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle.setupToggle"><code>setupToggle</code></a><br>
<a name="module_ui/theme-toggle.setupToggle..cleanupRemotes"></a></p>
<h3 id="setuptoggle~cleanupremotes()" tabindex="-1">setupToggle~cleanupRemotes()</h3>
<p>This only cleans up remotes that are still in DOM</p>
<ul>
<li>For ones that have been removed we don't store any references to them</li>
</ul>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle.setupToggle"><code>setupToggle</code></a><br>
<a name="module_ui/theme-toggle.setupToggle..destroy"></a></p>
<h3 id="setuptoggle~destroy()" tabindex="-1">setupToggle~destroy()</h3>
<p>Function to cleanup listeners and remove init attributes</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle.setupToggle"><code>setupToggle</code></a><br>
<a name="module_ui/theme-toggle..setState"></a></p>
<h2 id="ui%2Ftheme-toggle~setstate()" tabindex="-1">ui/theme-toggle~setState()</h2>
<p>Change the state of target/toggle</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<a name="module_ui/theme-toggle..resolveInitial"></a></p>
<h2 id="ui%2Ftheme-toggle~resolveinitial()-%E2%87%92-string" tabindex="-1">ui/theme-toggle~resolveInitial() ⇒ <code>String</code></h2>
<p>Function determines what the initial state is</p>
<ul>
<li>Check OS preference, saved preference, or initialState depending on options</li>
</ul>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<strong>Returns</strong>: <code>String</code> - The resolved initial theme's key<br>
<a name="module_ui/theme-toggle..getMatchingThemeQuery"></a></p>
<h2 id="ui%2Ftheme-toggle~getmatchingthemequery()-%E2%87%92-string" tabindex="-1">ui/theme-toggle~getMatchingThemeQuery() ⇒ <code>String</code></h2>
<p>Check each theme for a matching media query</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<strong>Returns</strong>: <code>String</code> - Matching theme key<br>
<a name="module_ui/theme-toggle..getNextThemeKey"></a></p>
<h2 id="ui%2Ftheme-toggle~getnextthemekey()" tabindex="-1">ui/theme-toggle~getNextThemeKey()</h2>
<p>Get the next key in the themes based on the currentKey</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<a name="module_ui/theme-toggle..getOtherThemes"></a></p>
<h2 id="ui%2Ftheme-toggle~getotherthemes()" tabindex="-1">ui/theme-toggle~getOtherThemes()</h2>
<p>Get all other theme object except the current</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<a name="module_ui/theme-toggle..concatThemeClasses"></a></p>
<h2 id="ui%2Ftheme-toggle~concatthemeclasses()" tabindex="-1">ui/theme-toggle~concatThemeClasses()</h2>
<p>Concatenates multiple class properties into one array</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a><br>
<a name="module_ui/theme-toggle..getStorageKey"></a></p>
<h2 id="ui%2Ftheme-toggle~getstoragekey()" tabindex="-1">ui/theme-toggle~getStorageKey()</h2>
<p>Creates the storage key (either prefix or prefix with group name)</p>
<p><strong>Kind</strong>: inner method of <a href="#module_ui/theme-toggle"><code>ui/theme-toggle</code></a></p>
</div>
</div>
</main>
<footer></footer>
<script src="http://localhost:5173/@vite/client" type="module"></script>
<script src="http://localhost:5173/docs-src/src/main.js" type="module"></script>
</body>
</html>