prettier

* initial progress redesigning themer controls

* themer controls touchup, fix missing minus icons

* isolate themer control styles

* rename 'headwind' > 'migration'

* rename 'chic' > 'active'

* revert wa-details change

* fix misplaced tooltips and menus with high depth

* fully isolate themer controls styles, touchup

* redesign color mode toggle

* change default Glassy logo

* address PR feedback

* active theme assets (#58)

* fix tooltip color in brutalist message composer header (#59)

* add container queries to Glassy

---------

Co-authored-by: frances botsford <frrrances@users.noreply.github.com>

docs/assets/styles/docs.css

@@ -0,0 +1,943 @@
+:root {
+  --docs-background-color: var(--wa-color-surface-default);
+  --docs-content-max-width: 860px;
+  --docs-sidebar-width: 320px;
+  --docs-sidebar-transition-speed: 250ms;
+  --docs-content-toc-max-width: 260px;
+  --docs-content-padding: 2rem;
+  --docs-content-vertical-spacing: 2rem;
+  --docs-search-overlay-background: rgb(0 0 0 / 0.2);
+  --docs-skip-to-main-width: 200px;
+}
+
+/* Light theme */
+:root {
+  color-scheme: normal;
+
+  --docs-overlay-color: hsl(240 3.8% 46.1% / 33%);
+  --docs-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --docs-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 24%);
+  --docs-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 24%);
+  --docs-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 24%);
+  --docs-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 24%);
+}
+
+/* Utils */
+html.wa-theme-dark .only-light,
+html:not(.wa-theme-dark) .only-dark {
+  display: none !important;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.visually-hidden:not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  border: none !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+}
+
+@media screen and (max-width: 900px) {
+  :root {
+    --docs-content-padding: 1rem;
+  }
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+  line-height: var(--wa-font-line-height-regular);
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Common elements */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 3rem 0 1.5rem 0;
+}
+
+h1:first-of-type {
+  margin-top: 1rem;
+}
+
+.badges img {
+  border-radius: var(--wa-corners-s);
+}
+
+.callout img {
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* Color matching logos */
+svg.logo {
+  color: var(--wa-color-brand-text-on-surface);
+}
+
+/* Anchor headings */
+.anchor-heading {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+}
+
+.anchor-heading a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.anchor-heading a::after {
+  content: '#';
+  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
+  margin-inline: 0.5rem;
+  opacity: 0;
+  transition: 100ms opacity;
+}
+
+.anchor-heading:hover a::after,
+.anchor-heading:focus-within a::after {
+  opacity: 1;
+}
+
+/* External links */
+.external-link__icon {
+  width: 0.75em;
+  height: 0.75em;
+  vertical-align: 0;
+  margin-left: 0.25em;
+  margin-right: 0.125em;
+}
+
+/* Tables */
+table th p:first-child,
+table td p:first-child {
+  margin-top: 0;
+}
+
+table th p:last-child,
+table td p:last-child {
+  margin-bottom: 0;
+}
+
+.table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.table-scroll code {
+  white-space: nowrap;
+}
+
+th.table-name,
+th.table-event-detail {
+  min-width: 15ch;
+}
+
+th.table-description {
+  min-width: 50ch !important;
+  max-width: 70ch;
+}
+
+/* Code blocks */
+
+pre:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+pre {
+  position: relative;
+}
+
+pre > code {
+  display: block;
+  background: none !important;
+  border-radius: 0;
+  hyphens: none;
+  tab-size: 2;
+  white-space: pre;
+  padding: 1rem;
+  margin: -1rem;
+  overflow: auto;
+}
+
+pre .token.comment {
+  color: var(--wa-color-base-40);
+}
+
+pre .token.prolog,
+pre .token.doctype,
+pre .token.cdata,
+pre .token.operator,
+pre .token.punctuation {
+  color: var(--wa-color-base-40);
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+pre .token.property,
+pre .token.keyword,
+pre .token.tag,
+pre .token.url {
+  color: var(--wa-color-brand-text-on-fill);
+}
+
+pre .token.symbol,
+pre .token.deleted {
+  color: var(--wa-color-danger-text-on-fill);
+}
+
+pre .token.boolean,
+pre .token.constant,
+pre .token.selector,
+pre .token.attr-name,
+pre .token.string,
+pre .token.char,
+pre .token.builtin,
+pre .token.inserted {
+  color: var(--wa-color-success-text-on-fill);
+}
+
+pre .token.atrule,
+pre .token.attr-value,
+pre .token.number,
+pre .token.variable {
+  color: var(--wa-color-warning-text-on-fill);
+}
+
+pre .token.function,
+pre .token.class-name,
+pre .token.regex {
+  color: var(--wa-color-danger-text-on-fill);
+}
+
+pre .token.important {
+  color: var(--wa-color-danger-text-on-fill);
+}
+
+pre .token.important,
+pre .token.bold {
+  font-weight: bold;
+}
+
+pre .token.italic {
+  font-style: italic;
+}
+
+/* Copy code button */
+.copy-code-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  white-space: normal;
+  color: var(--wa-color-neutral-text-on-fill-alt);
+  transition:
+    150ms opacity,
+    150ms scale;
+}
+
+.copy-code-button::part(button) {
+  background-color: var(--wa-color-neutral-fill-subtle);
+  border-radius: 0 var(--wa-corners-s) 0 var(--wa-corners-s);
+  padding: 0.75rem;
+}
+
+.copy-code-button::part(button):hover {
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-hover));
+}
+
+.copy-code-button::part(button):active {
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-active));
+}
+
+pre .copy-code-button {
+  opacity: 0;
+  scale: 0.75;
+}
+
+pre:hover .copy-code-button,
+.copy-code-button:focus-within {
+  opacity: 1;
+  scale: 1;
+}
+
+/* Callouts */
+.callout {
+  margin-bottom: var(--docs-content-vertical-spacing);
+}
+
+.callout > :first-child {
+  margin-top: 0;
+}
+
+.callout > :last-child {
+  margin-bottom: 0;
+}
+
+.callout a {
+  color: inherit;
+}
+
+.callout p {
+  margin-top: 0;
+}
+
+/* Aside */
+.content aside {
+  float: right;
+  min-width: 300px;
+  max-width: 50%;
+  background: var(--wa-color-surface-lowered);
+  border-radius: var(--wa-corners-s);
+  padding: var(--wa-space-m);
+  margin-left: var(--wa-space-m);
+}
+
+.content aside > :first-child {
+  margin-top: 0;
+}
+
+.content aside > :last-child {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .content aside {
+    float: none;
+    width: calc(100% + (var(--docs-content-padding) * 2));
+    max-width: none;
+    margin: var(--docs-content-vertical-spacing) calc(-1 * var(--docs-content-padding));
+  }
+}
+
+/* Sidebar */
+#sidebar {
+  position: fixed;
+  flex: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 20;
+  width: var(--docs-sidebar-width);
+  background-color: var(--docs-background-color);
+  border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+  border-radius: 0;
+  padding: 2rem;
+  margin: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  transition: var(--docs-sidebar-transition-speed) translate ease-in-out;
+}
+
+#sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+#sidebar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 9999px;
+}
+
+#sidebar:hover::-webkit-scrollbar-thumb {
+  background: var(--wa-color-neutral-border-highlight);
+}
+
+#sidebar:hover::-webkit-scrollbar-track {
+  background: var(--wa-color-surface-raised);
+}
+
+#sidebar > header {
+  margin-bottom: 1.5rem;
+}
+
+#sidebar > header h1 {
+  margin: 0;
+}
+
+#sidebar > header svg {
+  margin-bottom: var(--wa-space-s);
+}
+
+#sidebar > header a {
+  display: block;
+}
+
+#sidebar nav a {
+  text-decoration: none;
+}
+
+#sidebar nav h2 {
+  font-size: var(--wa-font-size-m);
+  font-weight: var(--wa-font-weight-medium);
+  border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+  margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
+}
+
+#sidebar ul {
+  padding: 0;
+  margin: 0;
+}
+
+#sidebar ul li {
+  list-style: none;
+  padding: 0;
+  margin: 0.125rem 0.5rem;
+}
+
+#sidebar ul ul ul {
+  margin-left: 0.75rem;
+}
+
+#sidebar ul li a {
+  line-height: 1.33;
+  color: inherit;
+  display: inline-block;
+  padding: 0;
+}
+
+#sidebar ul li a:not(.active-link):hover {
+  color: var(--wa-color-text-link);
+}
+
+#sidebar nav .active-link {
+  color: var(--wa-color-text-link);
+  border-bottom: dashed 1px var(--wa-color-text-link);
+}
+
+#sidebar > header img {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 900px) {
+  #sidebar {
+    translate: -100%;
+  }
+
+  .sidebar-open #sidebar {
+    translate: 0;
+  }
+}
+
+.sidebar-version {
+  font-size: var(--wa-font-size-s);
+  color: var(--wa-color-text-quiet);
+  text-align: right;
+  margin-top: calc(-1 * var(--wa-space-s));
+  margin-bottom: calc(-1 * var(--wa-space-s));
+}
+
+.sidebar-buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Main content */
+main {
+  position: relative;
+  padding: var(--docs-content-vertical-spacing) var(--docs-content-padding)
+    calc(var(--docs-content-vertical-spacing) * 2) var(--docs-content-padding);
+  margin-left: var(--docs-sidebar-width);
+}
+
+.sidebar-open .content {
+  margin-left: 0;
+}
+
+.content__body > :last-child {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 900px) {
+  main {
+    margin-left: 0;
+  }
+}
+
+/* Component layouts */
+.content {
+  display: grid;
+  grid-template-columns: 100%;
+  gap: 2rem;
+  position: relative;
+  max-width: var(--docs-content-max-width);
+  margin: 0 auto;
+}
+
+.content--with-toc {
+  /* There's a 2rem gap, so we need to remove it from the column */
+  grid-template-columns: calc(75% - 2rem) min(25%, var(--docs-content-toc-max-width));
+  max-width: calc(var(--docs-content-max-width) + var(--docs-content-toc-max-width));
+}
+
+.content__body {
+  order: 1;
+  width: 100%;
+}
+
+.content:not(.content--with-toc) .content__toc {
+  display: none;
+}
+
+.content__toc {
+  order: 2;
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+}
+
+.content__toc ul {
+  position: sticky;
+  top: 5rem;
+  max-height: calc(100vh - 6rem);
+  font-size: var(--wa-font-size-s);
+  line-height: 1.33;
+  border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+  list-style: none;
+  padding: 1rem 0;
+  margin: 0;
+  padding-left: 1rem;
+  overflow-y: auto;
+}
+
+.content__toc li {
+  padding: 0 0 0 0.5rem;
+  margin: 0;
+}
+
+.content__toc li[data-level='3'] {
+  margin-left: 1rem;
+}
+
+/* We don't use them, but just in case */
+.content__toc li[data-level='4'],
+.content__toc li[data-level='5'],
+.content__toc li[data-level='6'] {
+  margin-left: 2rem;
+}
+
+.content__toc li:not(:last-of-type) {
+  margin-bottom: 0.6rem;
+}
+
+.content__toc a {
+  color: var(--wa-color-text-normal);
+  text-decoration: none;
+}
+
+.content__toc a:hover {
+  color: var(--wa-color-text-link);
+}
+
+.content__toc a.active {
+  color: var(--wa-color-brand-text-on-surface);
+  border-bottom: dashed 1px var(--wa-color-brand-text-on-surface);
+}
+
+.content__toc .top a {
+  font-weight: var(--wa-font-weight-medium);
+  color: var(--wa-color-text-quiet);
+}
+
+@media screen and (max-width: 1024px) {
+  .content {
+    grid-template-columns: 100%;
+    gap: 0;
+  }
+
+  .content__toc {
+    position: relative;
+    order: 1;
+  }
+
+  .content__toc ul {
+    display: flex;
+    justify-content: start;
+    gap: 1rem 1.5rem;
+    position: static;
+    border: none;
+    border-bottom: solid 1px var(--wa-color-surface-border);
+    border-radius: 0;
+    padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */
+    margin-top: 1rem;
+    overflow-x: auto;
+  }
+
+  .content__toc ul::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 1rem; /* don't cover the scrollbar */
+    right: 0;
+    width: 2rem;
+    background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--wa-color-surface-default) 100%);
+  }
+
+  .content__toc li {
+    white-space: nowrap;
+  }
+
+  .content__toc li:not(:last-of-type) {
+    margin-bottom: 0;
+  }
+
+  .content__toc [data-level]:not([data-level='2']) {
+    display: none;
+  }
+
+  .content__body {
+    order: 2;
+  }
+}
+
+/* Menu toggle */
+#menu-toggle {
+  display: none;
+  position: fixed;
+  z-index: 30;
+  top: 0.25rem;
+  left: 0.25rem;
+  height: auto;
+  width: auto;
+  color: var(--wa-color-neutral-spot);
+  border: none;
+  border-radius: 50%;
+  background: var(--wa-color-surface-default);
+  padding: 0.5rem;
+  margin: 0;
+  cursor: pointer;
+  transition: 250ms rotate ease;
+}
+
+@media screen and (max-width: 900px) {
+  #menu-toggle {
+    display: flex;
+  }
+}
+
+#menu-toggle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+html.sidebar-open #menu-toggle {
+  rotate: 180deg;
+}
+
+/* Skip to main content */
+#skip-to-main {
+  position: fixed;
+  top: 0.25rem;
+  left: calc(50% - var(--docs-skip-to-main-width) / 2);
+  z-index: 100;
+  width: var(--docs-skip-to-main-width);
+  text-align: center;
+  text-decoration: none;
+  border-radius: 9999px;
+  background: var(--wa-color-surface-default);
+  color: var(--wa-color-text-normal);
+  padding: 0.5rem;
+}
+
+/* Print styles */
+@media print {
+  a:not(.anchor-heading)[href]::after {
+    content: ' (' attr(href) ')';
+  }
+
+  details,
+  pre {
+    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+  }
+
+  details summary {
+    list-style: none;
+  }
+
+  details summary span {
+    padding-left: 0;
+  }
+
+  details summary::marker,
+  details summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .component-page__navigation,
+  .copy-code-button,
+  .code-preview__buttons,
+  .code-preview__resizer {
+    display: none !important;
+  }
+
+  .flavor-html .code-preview__source--html,
+  .flavor-react .code-preview__source--react {
+    display: block !important;
+  }
+
+  .flavor-html .code-preview__source--html > pre,
+  .flavor-react .code-preview__source--react > pre {
+    border: none;
+  }
+
+  .code-preview__source-group {
+    border-bottom: solid 1px var(--wa-border-width-s);
+    border-bottom-left-radius: var(--wa-corners-s);
+    border-bottom-right-radius: var(--wa-corners-s);
+  }
+
+  #sidebar {
+    display: none;
+  }
+
+  #content {
+    margin-left: 0;
+  }
+
+  #menu-toggle,
+  #icon-toolbar,
+  .external-link__icon {
+    display: none;
+  }
+}
+
+/* Splash */
+.splash {
+  display: flex;
+  padding-top: 2rem;
+}
+
+.splash-start {
+  min-width: 440px;
+}
+
+.splash li img {
+  width: 1em;
+  height: 1em;
+  vertical-align: -2px;
+}
+
+.splash svg {
+  margin-block-end: var(--wa-space-m);
+}
+
+.splash-end {
+  display: flex;
+  align-items: flex-end;
+  width: auto;
+  padding-left: 1rem;
+}
+
+.splash-image {
+  width: 100%;
+  height: auto;
+}
+
+.splash-start h1:first-of-type {
+  font-size: var(--wa-font-size-l);
+  font-weight: var(--wa-font-weight-normal);
+  margin: 0 0 0.5rem 0;
+}
+
+@media screen and (max-width: 1280px) {
+  .splash {
+    display: block;
+  }
+
+  .splash-start {
+    min-width: 0;
+    padding-bottom: 1rem;
+  }
+
+  .splash-end {
+    padding: 0;
+  }
+
+  .splash-image {
+    display: block;
+    max-width: 400px;
+  }
+
+  /* Shields */
+  .splash + p {
+    margin-top: 2rem;
+  }
+}
+
+/* Component headers */
+.component-header h1 {
+  margin-bottom: 0;
+}
+
+.component-header__tag {
+  margin-top: -0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.component-header__tag code {
+  background: none;
+  color: var(--wa-color-text-quiet);
+  font-size: var(--wa-font-size-l);
+  padding: 0;
+  margin: 0;
+}
+
+.component-header__info {
+  margin-bottom: var(--wa-space-2xl);
+}
+
+.component-summary {
+  font-size: var(--wa-font-size-l);
+  line-height: 1.6;
+  margin: 2rem 0;
+}
+
+/* Repo buttons */
+.sidebar-buttons {
+  display: flex;
+  gap: 0.125rem;
+  justify-content: space-between;
+}
+
+.sidebar-buttons .repo-button {
+  flex: 1 1 auto;
+}
+
+.repo-button wa-icon {
+  color: var(--wa-color-neutral-text-on-spot);
+}
+
+@media screen and (max-width: 400px) {
+  :not(.sidebar-buttons) > .repo-button {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+}
+
+body[data-page^='/tokens/'] .table-wrapper td:first-child,
+body[data-page^='/tokens/'] .table-wrapper td:first-child code {
+  white-space: nowrap;
+}
+
+/* Border demos */
+.border-demo {
+  height: 60px;
+  border-left: solid 1px var(--wa-color-brand-spot);
+}
+
+.corner-demo {
+  width: 3rem;
+  height: 3rem;
+  background: var(--wa-color-brand-spot);
+}
+
+/* Transition demo */
+.transition-demo {
+  position: relative;
+  background: var(--wa-color-neutral-fill-subtle);
+  width: 8rem;
+  height: 2rem;
+}
+
+.transition-demo:after {
+  content: '';
+  position: absolute;
+  background-color: var(--wa-color-brand-spot);
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  transition-duration: inherit;
+  transition-property: width;
+}
+
+.transition-demo:hover:after {
+  width: 100%;
+}
+
+/* Spacing demo */
+.spacing-demo {
+  background: var(--wa-color-brand-spot);
+}
+
+/* Shadow demo */
+.shadow-demo {
+  background: transparent;
+  border-radius: 3px;
+  width: 4rem;
+  height: 4rem;
+  margin: 1rem;
+}
+
+/* Color palettes */
+.color-palette {
+  display: grid;
+  grid-template-columns: 200px repeat(11, 1fr);
+  gap: var(--wa-space-m) 1px;
+  margin: var(--wa-space-2xl) 0;
+}
+
+.color-palette__name {
+  font-weight: var(--wa-font-weight-medium);
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.color-palette__name code {
+  background: none;
+  font-size: var(--wa-font-size-s);
+}
+
+.color-palette__example {
+  font-size: var(--wa-font-size-s);
+  text-align: center;
+}
+
+.color-palette__swatch {
+  height: 3rem;
+  border-radius: var(--wa-corners-xs);
+}
+
+.color-palette__swatch--border {
+  box-shadow: inset 0 0 0 1px var(--wa-color-surface-border);
+}
+
+@media screen and (max-width: 1200px) {
+  .color-palette {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .color-palette__name {
+    grid-column-start: span 6;
+  }
+}
+
+.docs-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 2rem;
+}

docs/public/assets/icons/bootstrap/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/>
+</svg>

docs/public/assets/icons/bootstrap/arrow-rotate-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>

docs/public/assets/icons/bootstrap/at.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-at" viewBox="0 0 16 16">
+  <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914"/>
+</svg>

docs/public/assets/icons/bootstrap/backpack.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-backpack" viewBox="0 0 16 16">
+  <path d="M4.04 7.43a4 4 0 0 1 7.92 0 .5.5 0 1 1-.99.14 3 3 0 0 0-5.94 0 .5.5 0 1 1-.99-.14M4 9.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5zm1 .5v3h6v-3h-1v.5a.5.5 0 0 1-1 0V10z"/>
+  <path d="M6 2.341V2a2 2 0 1 1 4 0v.341c2.33.824 4 3.047 4 5.659v5.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5V8a6 6 0 0 1 4-5.659M7 2v.083a6 6 0 0 1 2 0V2a1 1 0 0 0-2 0m1 1a5 5 0 0 0-5 5v5.5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5V8a5 5 0 0 0-5-5"/>
+</svg>

docs/public/assets/icons/bootstrap/bag-shopping.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
+  <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+</svg>

docs/public/assets/icons/bootstrap/block-quote.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-blockquote-left" viewBox="0 0 16 16">
+  <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1zm5 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1zm.79-5.373q.168-.117.444-.275L3.524 6q-.183.111-.452.287-.27.176-.51.428a2.4 2.4 0 0 0-.398.562Q2 7.587 2 7.969q0 .54.217.873.217.328.72.328.322 0 .504-.211a.7.7 0 0 0 .188-.463q0-.345-.211-.521-.205-.182-.568-.182h-.282q.036-.305.123-.498a1.4 1.4 0 0 1 .252-.37 2 2 0 0 1 .346-.298zm2.167 0q.17-.117.445-.275L5.692 6q-.183.111-.452.287-.27.176-.51.428a2.4 2.4 0 0 0-.398.562q-.165.31-.164.692 0 .54.217.873.217.328.72.328.322 0 .504-.211a.7.7 0 0 0 .188-.463q0-.345-.211-.521-.205-.182-.568-.182h-.282a1.8 1.8 0 0 1 .118-.492q.087-.194.257-.375a2 2 0 0 1 .346-.3z"/>
+</svg>

docs/public/assets/icons/bootstrap/bold.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>

docs/public/assets/icons/bootstrap/book-open.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
+  <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
+</svg>

docs/public/assets/icons/bootstrap/bookmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
+  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
+</svg>

docs/public/assets/icons/bootstrap/boombox.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-boombox" viewBox="0 0 16 16">
+  <path d="M2.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2 0a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m7.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m-7-1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm5.5 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
+  <path d="M11.5 13a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0-1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M5 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
+  <path d="M7 10.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
+  <path d="M14 0a.5.5 0 0 1 .5.5V2h.5a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12.5V.5A.5.5 0 0 1 14 0M1 3v3h14V3zm14 4H1v7h14z"/>
+</svg>

docs/public/assets/icons/bootstrap/bug.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bug" viewBox="0 0 16 16">
+  <path d="M4.355.522a.5.5 0 0 1 .623.333l.291.956A5 5 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A5 5 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623M4 7v4a4 4 0 0 0 3.5 3.97V7zm4.5 0v7.97A4 4 0 0 0 12 11V7zM12 6a4 4 0 0 0-1.334-2.982A3.98 3.98 0 0 0 8 2a3.98 3.98 0 0 0-2.667 1.018A4 4 0 0 0 4 6z"/>
+</svg>

docs/public/assets/icons/bootstrap/calendar.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/>
+</svg>

docs/public/assets/icons/bootstrap/car.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-car-front" viewBox="0 0 16 16">
+  <path d="M4 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0m10 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2zM4.862 4.276 3.906 6.19a.51.51 0 0 0 .497.731c.91-.073 2.35-.17 3.597-.17s2.688.097 3.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 10.691 4H5.309a.5.5 0 0 0-.447.276"/>
+  <path d="M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679q.05.242.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.8.8 0 0 0 .381-.404l.792-1.848ZM4.82 3a1.5 1.5 0 0 0-1.379.91l-.792 1.847a1.8 1.8 0 0 1-.853.904.8.8 0 0 0-.43.564L1.03 8.904a1.5 1.5 0 0 0-.03.294v.413c0 .796.62 1.448 1.408 1.484 1.555.07 3.786.155 5.592.155s4.037-.084 5.592-.155A1.48 1.48 0 0 0 15 9.611v-.413q0-.148-.03-.294l-.335-1.68a.8.8 0 0 0-.43-.563 1.8 1.8 0 0 1-.853-.904l-.792-1.848A1.5 1.5 0 0 0 11.18 3z"/>
+</svg>

docs/public/assets/icons/bootstrap/cart-shopping.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
+  <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l1.313 7h8.17l1.313-7zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+</svg>

docs/public/assets/icons/bootstrap/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>

docs/public/assets/icons/bootstrap/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
+</svg>

docs/public/assets/icons/bootstrap/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
+</svg>

docs/public/assets/icons/bootstrap/circle-info.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>

docs/public/assets/icons/bootstrap/circle-plus.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
+</svg>

docs/public/assets/icons/bootstrap/clock.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
+  <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
+  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/>
+</svg>

docs/public/assets/icons/bootstrap/code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
+  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z"/>
+</svg>

docs/public/assets/icons/bootstrap/credit-card.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-credit-card" viewBox="0 0 16 16">
+  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z"/>
+  <path d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+</svg>

docs/public/assets/icons/bootstrap/ellipsis.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+  <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/>
+</svg>