Experiment

docs/_data/componentList.js

@@ -31,13 +31,25 @@ const components = manifest.modules.flatMap(module => {
         return prop.kind === 'field' && prop.privacy !== 'private';
       });
 
-      return {
+      let ret = {
         ...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,6 +14,18 @@ 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/docs/test/styling.njk

@@ -0,0 +1,36 @@
+---
+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,13 +5,18 @@ 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';
@@ -69,13 +74,13 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property() title = ''; // make reactive to pass through
 
   /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
+  @property({ reflect: true }) variant: VariantAttribute = 'neutral';
 
   /** The button's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
+  @property({ reflect: true }) appearance: AppearanceAttribute = 'accent';
 
   /** The button's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: SizeAttribute = '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,10 +1,15 @@
 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';
@@ -33,14 +38,13 @@ export default class WaTag extends WebAwesomeElement {
   private readonly localize = new LocalizeController(this);
 
   /** The tag's theme variant. */
-  @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
+  @property({ reflect: true }) variant: VariantAttribute = 'neutral';
 
   /** The tag's visual appearance. */
-  @property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
-    'outlined filled';
+  @property({ reflect: true }) appearance: AppearanceAttribute = 'outlined filled';
 
   /** The tag's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: SizeAttribute = 'medium';
 
   /** Draws a pill-style tag with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;

src/internal/styling-attributes.ts

@@ -0,0 +1,16 @@
+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';