The big rename nobody wants to do :P

docs/_includes/sidebar.njk

@@ -50,16 +50,16 @@
   </ul>
 </wa-details>
 
-<wa-details {{ 'open' if '/essentials/' in page.url }}>
+<wa-details {{ 'open' if '/native/' in page.url }}>
   <h2 slot=summary>
-    <a href="/docs/essentials/" title="Overview">Essentials
+    <a href="/docs/native/" title="Overview">Native Styles
       <wa-icon name="grid-2"></wa-icon>
     </a>
   </h2>
   <ul>
-    {% for page in collections.essentials | sort %}
+    {% for page in collections.native | sort %}
     <li>
-      <a href="/docs/essentials/{{ page.fileSlug }}">{{ page.data.title }}</a>
+      <a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
     </li>
     {% endfor %}
   </ul>

docs/_layouts/component.njk

@@ -23,11 +23,11 @@
   <p class="summary">
     {{ component.summary | inlineMarkdown | safe }}
   </p>
-  {% if essentials %}
+  {% if native %}
   <wa-callout variant="success">
     <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
     Just want the styles?
-    Check out <a href="/docs/essentials/{{ essentials }}/">{{ ('/docs/essentials/' + essentials + '/') | getTitleFromUrl }} essentials</a>!
+    Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
   </wa-callout>
   {% endif %}
 {% endblock %}

docs/_layouts/element.njk

@@ -48,7 +48,7 @@
   {# Slots #}
   {% if css_file %}
     <h2>Using these styles</h2>
-    <p>If you want to use these styles without using the entirety of Web Awesome Essentials, you can include the following CSS files:</p>
+    <p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
 
 
   {% endif %}

docs/docs/components/button.md

@@ -2,7 +2,7 @@
 title: Button
 description: Buttons represent actions that are available to the user.
 tags: component
-essentials: button
+native: button
 ---
 
 ```html {.example}

docs/docs/components/details.md

@@ -2,7 +2,7 @@
 title: Details
 description: Details show a brief summary and expand to show additional content.
 tags: component
-essentials: details
+native: details
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->

docs/docs/components/dialog.md

@@ -2,7 +2,7 @@
 title: Dialog
 description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
 tags: component
-essentials: dialog
+native: dialog
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->

docs/docs/components/input.md

@@ -2,7 +2,7 @@
 title: Input
 description: Inputs collect data from the user.
 tags: component
-essentials: input
+native: input
 ---
 
 ```html {.example}

docs/docs/components/select.md

@@ -2,7 +2,7 @@
 title: Select
 description: Selects allow you to choose items from a menu of predefined options.
 tags: component
-essentials: input
+native: input
 ---
 
 ```html {.example}

docs/docs/components/textarea.md

@@ -2,7 +2,7 @@
 title: Textarea
 description: Textareas collect data from the user and allow multiple lines of text.
 tags: component
-essentials: input
+native: input
 ---
 
 ```html {.example}
@@ -97,4 +97,4 @@ Textareas will automatically resize to expand to fit their content when `resize`
 
 ```html {.example}
 <wa-textarea resize="auto"></wa-textarea>
-```
+```

docs/docs/native/button.md

@@ -1,6 +1,6 @@
 ---
 title: Button
-tags: essentials
+tags: native
 layout: element
 component: button
 ---

docs/docs/native/content.md

@@ -1,6 +1,6 @@
 ---
 title: Content
-tags: essentials
+tags: native
 layout: element
 ---
 

docs/docs/native/details.md

@@ -1,6 +1,6 @@
 ---
 title: Details
-tags: essentials
+tags: native
 layout: element
 component: details
 elements:

docs/docs/native/dialog.md

@@ -1,7 +1,7 @@
 ---
 title: Dialog
 description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
-tags: essentials
+tags: native
 layout: element
 elements:
   "<dialog>":  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

docs/docs/native/index.md

@@ -1,5 +1,5 @@
 ---
-title: Essentials
+title: Native Styles
 description: TODO
 ---
 
@@ -7,7 +7,7 @@ Web Awesome works _with_ the platform, rather than trying to reinvent it.
 If all you need is styles, you don’t need to use new `<wa-*>` elements!
 We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
 
-To use all Web Awesome Essentials, include the following stylesheet in your project:
+To use all Web Awesome Native Styles, include the following stylesheet in your project:
 
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/themes/applied.css' %}" />
@@ -17,19 +17,19 @@ Here’s what we have so far:
 
 <!-- TODO make nice cards for these -->
 <ul>
-  {%- for page in collections.essentials | sort -%}
+  {%- for page in collections.native | sort -%}
   <li>
-    <a href="/docs/essentials/{{ page.fileSlug }}">{{ page.data.title }}</a>
+    <a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
   </li>
   {%- endfor -%}
 </ul>
 
-## Opting out of Essentials on a case by case basis
+## Opting out of Native Styles
 
-So you've decided to use Essentials and now you need to style an element or a part of a page completely differently, what to do?
+So you've decided to use Native Styles and now you need to style an element or a part of a page completely differently, what to do?
 You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)!
 
-Instead of including Essentials with a `<link>` element, you can include it like this:
+Instead of including Native Styles with a `<link>` element, you can include it like this:
 
 ```html
 <style>
@@ -45,7 +45,7 @@ Instead of including Essentials with a `<link>` element, you can include it like
 </style>
 ```
 
-Then you can opt-out of Essentials styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees:
+Then you can opt-out of Native Styles styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees:
 
 ```html
 <p>
@@ -79,5 +79,5 @@ E.g. to opt-out of `<details>` styling:
 }
 ```
 
-If you find yourself opting out of entire element types too much, you could consider only including the parts of Essentials you need instead of the whole thing.
-You can find instructions for how to do that on the individual Essentials pages.
+If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing.
+You can find instructions for how to do that on the individual Native Styles pages.

docs/docs/native/input.md

@@ -1,6 +1,6 @@
 ---
 title: Form Inputs
-tags: essentials
+tags: native
 layout: element
 component:
  - input

docs/docs/native/lists.md

@@ -1,6 +1,6 @@
 ---
 title: Lists
-tags: essentials
+tags: native
 layout: element
 elements:
   "<ul>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

docs/docs/native/table.md

@@ -1,6 +1,6 @@
 ---
 title: Table
-tags: essentials
+tags: native
 layout: element
 elements:
   "<table>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table