evening up line breaks

.github/CODE_OF_CONDUCT.md

@@ -35,7 +35,7 @@ This Code of Conduct applies within all project spaces, and it also applies when
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support@fontawesome.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at cory@abeautifulsite.net. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [claviska]

.github/SECURITY.md

@@ -2,6 +2,6 @@
 
 We take security issues in Web Awesome very seriously and appreciate your efforts to disclose your findings responsibly.
 
-To report a security issue, email [support@fontawesome.com](mailto:support@fontawesome.com) and include "WEB AWESOME SECURITY" in the subject line.
+To report a security issue, email [cory@fontawesome.com](mailto:cory@abeautifulsite.net) and include "WEB AWESOME SECURITY" in the subject line.
 
 We'll respond as soon as possible and keep you updated throughout the process.

.prettierignore

@@ -1,5 +1,4 @@
 *.hbs
-*.mdx
 .cache
 .github
 cspell.json

README.md

@@ -1,5 +1,7 @@
 # Web Awesome
 
+A forward-thinking library of web components.
+
 - Works with all frameworks 🧩
 - Works with CDNs 🚛
 - Fully customizable with CSS 🎨

cspell.json

@@ -21,6 +21,7 @@
     "cdndir",
     "chatbubble",
     "checkmark",
+    "claviska",
     "Clippy",
     "codebases",
     "codepen",
@@ -85,6 +86,7 @@
     "Kool",
     "labelledby",
     "Laravel",
+    "LaViska",
     "linkify",
     "listbox",
     "listitem",

docs/assets/images/web-awesome-mark-black.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.63 3.625C11.63 4.27911 11.2435 4.84296 10.6865 5.10064L14 8L17.2622 7.34755C17.0968 7.10642 17 6.81452 17 6.5C17 5.67157 17.6716 5 18.5 5C19.3284 5 20 5.67157 20 6.5C20 7.31157 19.3555 7.9726 18.5504 7.99917L15.0307 15.8207C14.7077 16.5384 13.9939 17 13.2068 17H6.79317C6.00615 17 5.29229 16.5384 4.96933 15.8207L1.44963 7.99917C0.64452 7.9726 0 7.31157 0 6.5C0 5.67157 0.671573 5 1.5 5C2.32843 5 3 5.67157 3 6.5C3 6.81452 2.9032 7.10642 2.73777 7.34755L6 8L9.31702 5.09761C8.76346 4.83855 8.38 4.27656 8.38 3.625C8.38 2.72754 9.10754 2 10.005 2C10.9025 2 11.63 2.72754 11.63 3.625Z" fill="currentColor"/>
-</svg>

docs/assets/styles/docs.css

@@ -1,943 +0,0 @@
-: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/astro.config.mjs

@@ -33,23 +33,22 @@ export default defineConfig({
   server: {
     open: true,
     port: 4000,
-    host: true
+    host: true,
+    fs: {
+      strict: false
+    }
   },
   vite: {
-    server: {
-      watch: {
-        ignored: ['./public/pagefind/**/*.*'] // HERE
-      }
-    },
     plugins: [
       FullReload([
-        path.relative(__dirname, '../dist/custom-elements.json')
-        // path.relative(__dirname, './public/**/*.*')
+        path.relative(__dirname, '../dist/custom-elements.json'),
+        path.relative(__dirname, './public/**/*.*')
       ])
     ]
   },
   outDir: '../_site',
   site: 'https://shoelace.style',
+  compressHTML: false,
   markdown: {
     syntaxHighlight: 'prism',
     remarkPlugins: [

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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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>