fix layout demo and custom states support (#318)

* fix demo

* fix linting errors

* remove jinja, run prettier

* prettier

docs/_includes/sidebar.njk

@@ -20,7 +20,7 @@
 </ul>
 
 {# Components #}
-<wa-details{{ ' open' if '/components/' in page.url }}>
+<wa-details {{ 'open' if '/components/' in page.url }}>
   <h2 slot=summary>
     <a href="/docs/components/" title="Overview">Components
       <wa-icon name="grid-2"></wa-icon>
@@ -50,7 +50,7 @@
   </ul>
 </wa-details>
 
-<wa-details{{ ' open' if '/essentials/' in page.url }}>
+<wa-details {{ 'open' if '/essentials/' in page.url }}>
   <h2 slot=summary>
     <a href="/docs/essentials/" title="Overview">Essentials
       <wa-icon name="grid-2"></wa-icon>

docs/assets/examples/page-demo/demo.js

@@ -1,4 +1,3 @@
-await customElements.whenDefined('wa-checkbox');
 let container = document.getElementById('page_slots_demo');
 
 let fieldset = container.querySelector('fieldset');
@@ -10,7 +9,16 @@ let includes = `${stylesheets}
   <script src="/dist/webawesome.loader.js" type="module"></script>
   <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
 
-function render() {
+async function render() {
+  await customElements.whenDefined('wa-checkbox');
+
+  // Let checkboxes update their "state"
+  await Promise.allSettled(
+    Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => {
+      return checkbox.updateComplete;
+    }),
+  );
+
   let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
   let slotsHTML = slots
     .map(slot => {
@@ -39,5 +47,5 @@ function render() {
     iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
   }
 }
+await render();
 fieldset?.addEventListener('input', render);
-render();

docs/docs/components/cheatsheet.njk

@@ -64,15 +64,21 @@ table code {
 	<tr>
 		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
 		<td>
+      {% set componentLinks = [] %}
+			{% for component in thingComponents  %}
+			  {%- set link -%}
+				  <a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
+				{%- endset -%}
+				{# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #}
+        {% set componentLinks = (componentLinks.push(link), componentLinks) %}
+			{%- endfor -%}
 			{% if thingComponents.length > 1 %}
 				<details open>
 					<summary><strong>{{ thingComponents.length }}</strong> components</summary>
-			{% endif %}
-			{% for component in thingComponents  %}
-				<a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
-			{%- endfor -%}
-			{% if thingComponents.length > 1 %}
+					{{ componentLinks | safe }}
 				</details>
+			{% else %}
+				{{ componentLinks | safe }}
 			{% endif %}
 		</td>
 	</tr>

src/components/select/select.css

@@ -9,7 +9,7 @@
   display: block;
 }
 
-:host([appearance=filled]) {
+:host([appearance='filled']) {
   --background-color: var(--wa-color-neutral-fill-quiet);
   --border-color: var(--background-color);
 }

src/components/select/select.test.ts

@@ -485,7 +485,7 @@ describe('<wa-select>', () => {
                 <wa-option value="option-2">Option 2</wa-option>
                 <wa-option value="option-3">Option 3</wa-option>
               </wa-select>
-              <wa-button type="reset">Reset</button>
+              <wa-button type="reset">Reset</wa-button>
             </form>
           `);
 

src/components/textarea/textarea.css

@@ -9,7 +9,7 @@
   display: block;
 }
 
-:host([appearance=filled]) {
+:host([appearance='filled']) {
   --background-color: var(--wa-color-neutral-fill-quiet);
   --border-color: var(--background-color);
 }

src/components/textarea/textarea.ts

@@ -335,8 +335,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
               'textarea--small': this.size === 'small',
               'textarea--medium': this.size === 'medium',
               'textarea--large': this.size === 'large',
-              'textarea--standard': this.appearance !== "filled",
-              'textarea--filled': this.appearance === "filled",
+              'textarea--standard': this.appearance !== 'filled',
+              'textarea--filled': this.appearance === 'filled',
               'textarea--disabled': this.disabled,
               'textarea--focused': this.hasFocus,
               'textarea--empty': !this.value,

src/internal/webawesome-element.ts

@@ -115,7 +115,7 @@ export default class WebAwesomeElement extends LitElement {
 
   /** Checks if states are supported by the element */
   private hasStatesSupport(): boolean {
-    return this.internals?.states instanceof Set;
+    return Boolean(this.internals?.states);
   }
 
   /** Adds a custom state to the element. */

src/styles/themes/brutalist.css

@@ -601,8 +601,8 @@
 
   /* preventing shadows on all form input types */
   wa-input:not(:focus),
-  wa-input:not([appearance=filled]):not([disabled]),
-  wa-select:not([appearance=filled]):not([disabled]) {
+  wa-input:not([appearance='filled']):not([disabled]),
+  wa-select:not([appearance='filled']):not([disabled]) {
     --box-shadow: var(--wa-shadow-level-0);
     --border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
   }

src/styles/themes/classic.css

@@ -434,9 +434,9 @@ wa-drawer {
   --spacing: var(--wa-space-l);
 }
 
-wa-input:not([appearance=filled]),
-wa-select:not([appearance=filled]),
-wa-textarea:not([appearance=filled]) {
+wa-input:not([appearance='filled']),
+wa-select:not([appearance='filled']),
+wa-textarea:not([appearance='filled']) {
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
     color-mix(in oklab, var(--wa-color-focus), transparent 50%);
   --wa-focus-ring-offset: 0;

src/styles/themes/playful.css

@@ -500,9 +500,9 @@
 
   /* preventing shadows on all form input types */
   wa-input:not(:focus),
-  wa-input:not([appearance=filled]):not([disabled]),
+  wa-input:not([appearance='filled']):not([disabled]),
   wa-checkbox:not([checked]):not([indeterminate]),
-  wa-select:not([appearance=filled]):not([disabled]) {
+  wa-select:not([appearance='filled']):not([disabled]) {
     --box-shadow: var(--wa-shadow-level-0);
   }