prettier

docs/_includes/layout-templates/advanced-example.css

@@ -43,30 +43,31 @@ footer {
   background-color: var(--wa-color-blue-90);
 }
 
-.banner, .header {
+.banner,
+.header {
   min-width: 100%;
   height: 100%;
 }
 
-[slot=header] {
+[slot='header'] {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 }
 
-[slot=aside] {
+[slot='aside'] {
   background-color: var(--wa-color-yellow-90);
 }
 
-[slot=menu] {
+[slot='menu'] {
   background-color: var(--wa-color-red-80);
 }
 
-[slot=main-header] {
+[slot='main-header'] {
   background-color: var(--wa-color-red-90);
   padding: 1rem;
 }
 
-[slot=main-footer] {
+[slot='main-footer'] {
   background-color: var(--wa-color-red-70);
 }

docs/_includes/layout-templates/advanced-example.html

@@ -1,7 +1,5 @@
 <wa-layout main-id="main-content" class="wa-theme-light">
-  <header slot="banner" class="grid banner">
-    Banner
-  </header>
+  <header slot="banner" class="grid banner">Banner</header>
 
   <header slot="header" class="grid header">Header</header>
 
@@ -10,7 +8,7 @@
   <header class="grid" slot="main-header">Inline header</header>
 
   <main class="grid" id="main-content">
-    <div style="width: 20ch; margin: 0 auto; background-color: white;">Main</div>
+    <div style="width: 20ch; margin: 0 auto; background-color: white">Main</div>
   </main>
 
   <footer class="grid" slot="main-footer">Inline footer</footer>

docs/_includes/layout-templates/app.css

@@ -32,44 +32,43 @@ wa-layout::part(drawer__panel) {
   height: 100%;
 }
 
-wa-layout[view="mobile"] {
+wa-layout[view='mobile'] {
   background-color: var(--wa-color-white);
   --menu-width: 0px;
 }
 
-wa-layout[view="mobile"]::part(header) {
+wa-layout[view='mobile']::part(header) {
   padding: 0.25rem;
   border-bottom: 1px solid var(--wa-color-neutral-70);
 }
 
-wa-layout[view="mobile"]::part(navigation) {
+wa-layout[view='mobile']::part(navigation) {
   display: none;
 }
 
-wa-layout[view="desktop"]::part(main) {
+wa-layout[view='desktop']::part(main) {
   padding-top: 1rem;
 }
 
-wa-layout[view="desktop"] {
+wa-layout[view='desktop'] {
   --menu-width: 250px;
 }
 
-
-wa-layout[view="desktop"]::part(navigation) {
+wa-layout[view='desktop']::part(navigation) {
   padding-top: 1.9rem;
 }
 
-wa-layout[view="desktop"] > [slot="header"] {
+wa-layout[view='desktop'] > [slot='header'] {
   display: none;
 }
 
-wa-layout[view="desktop"]::part(header) {
+wa-layout[view='desktop']::part(header) {
   display: none;
 }
 
-wa-layout[view="desktop"] main {
+wa-layout[view='desktop'] main {
   background-color: var(--wa-color-white);
-  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.05);
+  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05);
   border: 1px solid var(--wa-color-neutral-80);
   border-top-left-radius: 8px;
 }
@@ -183,7 +182,7 @@ wa-layout[view="desktop"] main {
   --wa-spacing-large: 8px;
 }
 
-wa-layout[view="desktop"] .wa-button--nav-footer::part(base) {
+wa-layout[view='desktop'] .wa-button--nav-footer::part(base) {
   --border-color: transparent;
   border-top-color: var(--wa-color-neutral-70);
 }

docs/_includes/layout-templates/example.css

@@ -42,33 +42,33 @@ footer {
   background-color: var(--wa-color-blue-90);
 }
 
-.banner, .header {
+.banner,
+.header {
   min-width: 100%;
   height: 100%;
 }
 
-[slot=header] {
+[slot='header'] {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 }
 
-[slot=aside] {
+[slot='aside'] {
   height: 100%;
   background-color: var(--wa-color-yellow-90);
 }
 
-[slot=menu] {
+[slot='menu'] {
   height: 100%;
   background-color: var(--wa-color-red-90);
 }
 
-[slot=main-header] {
+[slot='main-header'] {
   background-color: var(--wa-color-red-80);
   padding: 1rem;
 }
 
-[slot=main-footer] {
+[slot='main-footer'] {
   background-color: var(--wa-color-green-80);
 }
-

docs/_includes/layout-templates/example.html

@@ -1,9 +1,7 @@
 <wa-layout main-id="main-content" class="wa-theme-light">
   <header class="grid" slot="header">Header</header>
   <aside class="grid" slot="menu">Menu</aside>
-  <main class="grid" id="main-content">
-    Main
-  </main>
+  <main class="grid" id="main-content">Main</main>
   <aside class="grid" slot="aside">Aside</aside>
   <footer class="grid" slot="footer">Footer</footer>
 </wa-layout>

docs/_includes/layout-templates/hero.css

@@ -7,4 +7,3 @@ body {
   padding: 0;
   height: auto;
 }
-

docs/_includes/layout-templates/hero.html

@@ -1,2 +1 @@
-<wa-layout main-id="main-content" class="wa-theme-light">
-</wa-layout>
+<wa-layout main-id="main-content" class="wa-theme-light"> </wa-layout>

docs/_includes/layout-templates/sport-awesome.css

@@ -15,7 +15,6 @@ body {
   margin-block-start: var(--wa-flow-spacing);
 }
 
-
 img {
   display: inline-block;
   max-width: 100%;
@@ -60,7 +59,7 @@ img {
 
 .header__navigation {
   display: flex;
-  clip-path: polygon(2rem 0,100% 0,100% 100%,0 100%);
+  clip-path: polygon(2rem 0, 100% 0, 100% 100%, 0 100%);
   padding-inline-start: 2.5rem;
   padding-inline-end: var(--wa-space-base);
   background-color: var(--wa-color-brand-fill-vivid);
@@ -80,7 +79,6 @@ a.logo {
   color: var(--wa-color-text-normal);
   text-decoration: none;
   margin: auto;
-
 }
 
 a.logo:is(:hover, :focus) {
@@ -97,7 +95,7 @@ a.logo:is(:hover, :focus) {
   width: 100%;
 }
 
-.navigation--desktop wa-nav-item[current="page"] {
+.navigation--desktop wa-nav-item[current='page'] {
   text-decoration: underline;
   text-underline-offset: 8px;
   text-decoration-thickness: 4px;
@@ -112,12 +110,12 @@ a.logo:is(:hover, :focus) {
   margin-inline-start: auto;
 }
 
-wa-layout[view="desktop"] [data-toggle-nav],
-wa-layout[view="desktop"]::part(navigation) {
+wa-layout[view='desktop'] [data-toggle-nav],
+wa-layout[view='desktop']::part(navigation) {
   display: none;
 }
 
-wa-layout[view="mobile"] .navigation--desktop {
+wa-layout[view='mobile'] .navigation--desktop {
   display: none;
 }
 
@@ -144,7 +142,6 @@ wa-layout[view="mobile"] .navigation--desktop {
   border: 1px solid var(--wa-color-surface-outline);
 }
 
-
 .table-scroll {
   max-width: 100%;
   overflow-x: auto;

docs/eleventy.config.cjs

@@ -64,12 +64,7 @@ module.exports = function (eleventyConfig) {
   //
   // Add additional extensions. This allows things like {% include "layout.css" %}
   //
-  eleventyConfig.setTemplateFormats([
-    "html",
-    "md",
-    "njk",
-    "css",
-  ])
+  eleventyConfig.setTemplateFormats(['html', 'md', 'njk', 'css']);
 
   //
   // Functions

docs/pages/components/layout.md

@@ -77,4 +77,4 @@ Toggling navigation can be done in a number of ways.
 </wa-layout>
 ```
 
-## Examples
+## Examples

docs/pages/components/nav-group.md

@@ -86,4 +86,4 @@ layout: component
     Disputed Charges
   </wa-nav-item>
 </wa-nav-group>
-```
+```

docs/pages/components/nav-item.md

@@ -229,4 +229,4 @@ import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
 </WaNavGroup>
 ```
 
-{% endraw %}
+{% endraw %}

docs/pages/layouts/index.md

@@ -15,4 +15,4 @@ window.Turbo.session.drive = false
 - [Hero Playground](/layouts/hero-playground/index.html)
 
 - [Sport Awesome Layout](/layouts/sport-awesome/index.html)
-- [Sport Awesome Playground](/layouts/sport-awesome-playground/index.html)
+- [Sport Awesome Playground](/layouts/sport-awesome-playground/index.html)

src/components/layout/layout.component.ts

@@ -75,7 +75,7 @@ export default class WaLayout extends WebAwesomeElement {
   /**
    * Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
    */
-  @property({ attribute: 'nav-open', reflect: true, type: Boolean  }) navOpen = false;
+  @property({ attribute: 'nav-open', reflect: true, type: Boolean }) navOpen = false;
 
   /**
    * At what "px" to hide the "menu" slot and collapse into a hamburger button
@@ -137,21 +137,19 @@ export default class WaLayout extends WebAwesomeElement {
   @query("[part~='banner']") banner: HTMLElement;
   @query("[part~='drawer']") navigationDrawer: WaDrawer;
 
-
   handleNavigationToggle = (e: Event) => {
-    if (e.composedPath().find((el: Element) => el?.hasAttribute?.("data-toggle-nav"))) {
-      e.preventDefault()
-      this.toggleNavigation()
+    if (e.composedPath().find((el: Element) => el?.hasAttribute?.('data-toggle-nav'))) {
+      e.preventDefault();
+      this.toggleNavigation();
     }
+  };
+
+  constructor() {
+    super();
+
+    this.addEventListener('click', this.handleNavigationToggle);
   }
 
-  constructor () {
-    super()
-
-    this.addEventListener("click", this.handleNavigationToggle)
-  }
-
-
   connectedCallback() {
     super.connectedCallback();
 
@@ -178,21 +176,21 @@ export default class WaLayout extends WebAwesomeElement {
    * Shows the mobile navigation drawer
    */
   showNavigation() {
-    this.navOpen = true
+    this.navOpen = true;
   }
 
   /**
    * Hides the mobile navigation drawer
    */
   hideNavigation() {
-    this.navOpen = false
+    this.navOpen = false;
   }
 
   /**
    * Toggles the mobile navigation drawer
    */
   toggleNavigation() {
-    this.navOpen = !this.navOpen
+    this.navOpen = !this.navOpen;
   }
 
   render() {
@@ -264,8 +262,8 @@ export default class WaLayout extends WebAwesomeElement {
         placement=${this.navigationPlacement}
         part="drawer"
         ?open=${live(this.navOpen)}
-        @wa-after-show=${() => this.navOpen = this.navigationDrawer.open}
-        @wa-after-hide=${() => this.navOpen = this.navigationDrawer.open}
+        @wa-after-show=${() => (this.navOpen = this.navigationDrawer.open)}
+        @wa-after-hide=${() => (this.navOpen = this.navigationDrawer.open)}
         exportparts="
           panel:drawer__panel
           base:drawer__base

src/components/layout/layout.styles.ts

@@ -18,34 +18,35 @@ export default css`
     --sub-header-height: 0px;
   }
 
-  :host([disable-sticky~="banner"]) :is([part~="header"], [part~="sub-header"]) {
+  :host([disable-sticky~='banner']) :is([part~='header'], [part~='sub-header']) {
     --banner-height: 0px !important;
   }
 
-  :host([disable-sticky~="header"]) [part~="sub-header"] {
+  :host([disable-sticky~='header']) [part~='sub-header'] {
     --header-height: 0px !important;
   }
 
   /* Nothing else depends on sub-header-height. */
-  :host([disable-sticky~="sub-header"]) {}
+  :host([disable-sticky~='sub-header']) {
+  }
 
-  :host([disable-sticky~="aside"]) [part~="aside"],
-  :host([disable-sticky~="menu"]) [part~="menu"] {
+  :host([disable-sticky~='aside']) [part~='aside'],
+  :host([disable-sticky~='menu']) [part~='menu'] {
     height: unset;
     max-height: unset;
   }
 
-  :host([disable-sticky~="banner"]) [part~="banner"],
-  :host([disable-sticky~="header"]) [part~="header"],
-  :host([disable-sticky~="sub-header"]) [part~="sub-header"],
-  :host([disable-sticky~="aside"]) [part~="aside"],
-  :host([disable-sticky~="menu"]) [part~="menu"] {
+  :host([disable-sticky~='banner']) [part~='banner'],
+  :host([disable-sticky~='header']) [part~='header'],
+  :host([disable-sticky~='sub-header']) [part~='sub-header'],
+  :host([disable-sticky~='aside']) [part~='aside'],
+  :host([disable-sticky~='menu']) [part~='menu'] {
     position: static;
     overflow: unset;
   }
 
-  :host([disable-sticky~="aside"]) [part~="aside"],
-  :host([disable-sticky~="menu"]) [part~="menu"] {
+  :host([disable-sticky~='aside']) [part~='aside'],
+  :host([disable-sticky~='menu']) [part~='menu'] {
     height: auto;
     max-height: auto;
   }

src/components/nav-item/nav-item.component.ts

@@ -35,7 +35,7 @@ export default class WaNavItem extends WebAwesomeElement {
   @property({ reflect: true }) href = '';
 
   /** maps to aria-current="<current>". Generally this value will either be "page", "true", or "false" */
-  @property({ reflect: true }) current:  "page" | "step" | "location" | "date" | "time" | "true" | "false" = "false"
+  @property({ reflect: true }) current: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' = 'false';
 
   /** Tells the browser where to open the link. Only used when `href` is present. */
   @property({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';
@@ -46,7 +46,7 @@ export default class WaNavItem extends WebAwesomeElement {
    * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
    * setting the attribute to an empty string or a value of your choice, respectively.
    */
-   @property({ reflect: true }) rel = 'noreferrer noopener';
+  @property({ reflect: true }) rel = 'noreferrer noopener';
 
   /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
   @property({ reflect: true }) download?: string;
@@ -61,7 +61,6 @@ export default class WaNavItem extends WebAwesomeElement {
    */
   @property({ reflect: true, type: Boolean }) expandable: boolean = false;
 
-
   @state() hasFocus: boolean = false;
 
   private handleBlur() {
@@ -77,12 +76,7 @@ export default class WaNavItem extends WebAwesomeElement {
   render() {
     const isRtl = this.localize.dir() === 'rtl';
     return html`
-      <div
-        class="base"
-        part="base"
-        role="listitem"
-        aria-current=${this.expandable ? "false" : this.current}
-      >
+      <div class="base" part="base" role="listitem" aria-current=${this.expandable ? 'false' : this.current}>
         ${when(
           this.expandable,
           () => html`

src/components/nav-item/nav-item.styles.ts

@@ -22,7 +22,7 @@ export default css`
     --border-color-hover: color-mix(in oklab, var(--background-color-hover), var(--wa-color-tint-hover));
   }
 
-  :host(:is([current="page"], [current="true"])) {
+  :host(:is([current='page'], [current='true'])) {
     --background-color: var(--wa-color-brand-fill-vivid);
     --text-color: var(--wa-color-brand-text-on-vivid);
     --background-color-hover: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
@@ -46,15 +46,16 @@ export default css`
     text-decoration: none;
     user-select: none;
     white-space: nowrap;
-    transition: var(--wa-transition-faster) background-color, var(--wa-transition-faster) color,
-      var(--wa-transition-faster) border, var(--wa-transition-faster) box-shadow;
+    transition:
+      var(--wa-transition-faster) background-color,
+      var(--wa-transition-faster) color,
+      var(--wa-transition-faster) border,
+      var(--wa-transition-faster) box-shadow;
     cursor: inherit;
     line-height: var(--wa-font-height-compact);
 
     background-color: var(--background-color);
     color: var(--text-color);
-
-
   }
 
   .control {
@@ -107,7 +108,6 @@ export default css`
     padding-inline-start: 2em;
   }
 
-
   .nav-items {
     display: flex;
     flex-direction: column;

src/themes/applied.css

@@ -15,7 +15,8 @@ html {
   box-sizing: inherit;
 }
 
-html,body {
+html,
+body {
   height: auto;
   min-height: 100%;
 }