add native icon to search

docs/_data/componentList.js

@@ -31,25 +31,13 @@ const components = manifest.modules.flatMap(module => {
         return prop.kind === 'field' && prop.privacy !== 'private';
       });
 
-      let ret = {
+      return {
         ...declaration,
         slug: declaration.tagName.replace(/^wa-/, ''),
         methods,
         attributes,
         properties,
       };
-
-      // Add named keys to these arrays
-      for (let thing of ['methods', 'attributes', 'properties', 'cssProperties', 'cssParts', 'cssStates', 'events']) {
-        if (ret[thing]) {
-          ret[thing] = ret[thing].reduce((acc, item) => {
-            acc[item.name] = item;
-            return acc;
-          }, ret[thing]);
-        }
-      }
-
-      return ret;
     });
 });
 

docs/_utils/filters.js

@@ -14,18 +14,6 @@ export function trimPipes(content) {
   return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
 }
 
-export function stripQuotes(content) {
-  return content.replace(/^(['"])(.+)\1$/g, '$2');
-}
-
-export function getEnumValues(type) {
-  return type
-    .split('|')
-    .map(value => value.trim())
-    .filter(Boolean)
-    .map(stripQuotes);
-}
-
 export function keys(obj) {
   return Object.keys(obj);
 }

docs/assets/scripts/search.js

@@ -9,6 +9,7 @@ const icons = {
   component: 'puzzle-piece',
   document: 'file',
   home: 'house',
+  native: 'code',
   theme: 'palette',
 };
 let searchTimeout;
@@ -166,6 +167,7 @@ async function updateResults(query = '') {
       li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
 
       if (page.url === '/') icon = icons.home;
+      if (page.url.startsWith('/docs/native')) icon = icons.native;
       if (page.url.startsWith('/docs/components')) icon = icons.component;
       if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;
 

docs/docs/test/styling.njk

@@ -1,36 +0,0 @@
----
-title: Styling Tests
----
-
-<h2>Appearance and variant tests</h2>
-
-{% for component in componentsBy.attribute.variant %}
-{%- if component.attributes.appearance -%}
-<h3><a href="../{{ component.url }}"><code>&lt;{{ component.tagName }}&gt;</code></a></h3>
-
-{% set variantValues = component.attributes.variant.type.text | getEnumValues %}
-{% set appearanceValues = component.attributes.appearance.type.text | getEnumValues %}
-
-<table>
-<thead>
-	<tr>
-		<th>Variant</th>
-		{% for appearance in appearanceValues %}
-			<th>{{ appearance }}</th>
-		{%- endfor %}
-	</tr>
-</thead>
-{% for variant in variantValues %}
-<tr>
-	<th>{{ variant }}</th>
-	{% for appearance in appearanceValues %}
-	<td>
-		<{{ component.tagName }} variant={{ variant }} appearance={{ appearance }}>{{ variant }} {{ appearance }}</{{ component.tagName }}>
-	</td>
-	{%- endfor %}
-</tr>
-{%- endfor %}
-</table>
-
-{% endif %}
-{%- endfor %}

src/components/button/button.ts

@@ -5,18 +5,13 @@ import { html, literal } from 'lit/static-html.js';
 import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
-import {
-  appearanceStyles,
-  sizeStyles,
-  variantStyles,
-  type AppearanceAttribute,
-  type SizeAttribute,
-  type VariantAttribute,
-} from '../../internal/styling-attributes.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
 import nativeStyles from '../../styles/native/button.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
+import sizeStyles from '../../styles/utilities/size.css';
+import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import '../spinner/spinner.js';
@@ -74,13 +69,13 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property() title = ''; // make reactive to pass through
 
   /** The button's theme variant. */
-  @property({ reflect: true }) variant: VariantAttribute = 'neutral';
+  @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: AppearanceAttribute = 'accent';
+  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
 
   /** The button's size. */
-  @property({ reflect: true }) size: SizeAttribute = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   @property({ type: Boolean, reflect: true }) caret = false;

src/components/tag/tag.ts

@@ -1,15 +1,10 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { WaRemoveEvent } from '../../events/remove.js';
-import {
-  appearanceStyles,
-  sizeStyles,
-  variantStyles,
-  type AppearanceAttribute,
-  type SizeAttribute,
-  type VariantAttribute,
-} from '../../internal/styling-attributes.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import appearanceStyles from '../../styles/utilities/appearance.css';
+import sizeStyles from '../../styles/utilities/size.css';
+import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon-button/icon-button.js';
 import styles from './tag.css';
@@ -38,13 +33,14 @@ export default class WaTag extends WebAwesomeElement {
   private readonly localize = new LocalizeController(this);
 
   /** The tag's theme variant. */
-  @property({ reflect: true }) variant: VariantAttribute = 'neutral';
+  @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
 
   /** The tag's visual appearance. */
-  @property({ reflect: true }) appearance: AppearanceAttribute = 'outlined filled';
+  @property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
+    'outlined filled';
 
   /** The tag's size. */
-  @property({ reflect: true }) size: SizeAttribute = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Draws a pill-style tag with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;

src/internal/styling-attributes.ts

@@ -1,16 +0,0 @@
-export { default as appearanceStyles } from '../styles/utilities/appearance.css';
-export { default as sizeStyles } from '../styles/utilities/size.css';
-export { default as variantStyles } from '../styles/utilities/variants.css';
-
-export type AppearanceAttribute =
-  | 'outlined'
-  | 'accent'
-  | 'outlined accent'
-  | 'accent outlined'
-  | 'filled'
-  | 'outlined filled'
-  | 'filled outlined'
-  | 'plain';
-
-export type VariantAttribute = 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
-export type SizeAttribute = 'small' | 'medium' | 'large';