elements: fix inconsistent API, UI, and DX issues

# What

This commit addresses a number of small DX problems that were getting in the way of a decent build-out.

- Removed all the Element Interface definitions; they weren’t adding anything to the value of the component. The Builders all use the Class definitions anyway.

- Made the builder Props consistent. Some had an `Ak` prefix, some didn’t. I’ve gone with “no Ak prefix” on types being imported for builders.

- Added missing t-shirt sizes, even when they’re defaults.

- Changed the names of some attributes to be more “positive” about what they mean: “no-loading-message” -\> “spinner-only”; “no-icon” -\> “text-only”; “no-arrow” -\> “hide-arrow”.

- Removes `reflect` where it’s not needed. Where it is necessary to trigger CSS effects when the value is dynamically changed (however unlikely that may be), I have added comments to say why reflection is required.

- Fix the issue in the Empty State builder where it was generating unneeded slotted divs for TemplateResults.

- Removed the `attribute` setting from Tooltip.target; it’s an Object, and cannot have an `attribute` key.

Author: kensternberg-authentik

src/ak-brand/ak-brand.component.ts

@@ -26,11 +26,11 @@ export class Brand extends LitElement {
     static readonly styles = [styles];
 
     /** @attr {string} src - The URL for the image source */
-    @property({ type: String, reflect: true })
+    @property({ type: String })
     src?: string;
 
     /** @attr {string} alt - The alt text for the image (for accessibility) */
-    @property({ type: String, reflect: true })
+    @property({ type: String })
     alt?: string;
 
     render() {

src/ak-button/ak-button.component.ts

@@ -109,6 +109,9 @@ export class Button extends LitElement {
 
     static readonly formAssociated = true;
 
+    // While it's unlikely that client code will modify these by manipulating `type` and `variant`
+    // fields directly, it's still possible. Their presence triggers corresponding CSS effects, so
+    // they must be monitored and reflected.
     @property({ reflect: true })
     public type?: ButtonType = "button";
 

src/ak-empty-state/ak-empty-state.builder.ts

@@ -19,6 +19,15 @@ export interface EmptyStateProps extends Partial<
     secondaryActions?: string | TemplateResult;
 }
 
+const SLOTNAMES: (keyof EmptyStateProps)[] = [
+    "icon",
+    "title",
+    "body",
+    "footer",
+    "actions",
+    "secondaryActions",
+];
+
 /**
  * @summary Helper function to create an EmptyState component programmatically
  *
@@ -27,19 +36,25 @@ export interface EmptyStateProps extends Partial<
  * @see {@link EmptyState} - The underlying web component
  */
 export function akEmptyState(options: EmptyStateProps) {
-    const {
-        size,
-        fullHeight,
-        spinnerOnly,
-        textOnly,
-        loading,
-        icon,
-        title,
-        body,
-        footer,
-        actions,
-        secondaryActions,
-    } = options;
+    const slots = SLOTNAMES.filter((s) => !!options[s]);
+
+    let opts = {
+        ...options,
+        ...Object.fromEntries(
+            slots.map((s) => [
+                s,
+                typeof options[s] === "string"
+                    ? html`<div slot=${s === "secondaryActions" ? "secondary-actions" : s}>
+                          ${options[s]}
+                      </div>`
+                    : options[s],
+            ]),
+        ),
+    };
+    console.log(opts);
+
+    const { size, fullHeight, spinnerOnly, textOnly, loading } = opts;
+
     return html`
         <ak-empty-state
             ?loading=${loading}
@@ -48,12 +63,7 @@ export function akEmptyState(options: EmptyStateProps) {
             ?spinner-only=${spinnerOnly}
             size=${ifDefined(String(size))}
         >
-            ${icon ? html`<div slot="icon">${icon}</div>` : ""}
-            ${title ? html`<div slot="title">${title}</div>` : ""}
-            ${body ? html`<div slot="body">${body}</div>` : ""}
-            ${footer ? html`<div slot="footer">${footer}</div>` : ""}
-            ${actions ? html`<div slot="actions">${actions}</div>` : ""}
-            ${secondaryActions ? html`<div slot="secondary-actions">${secondaryActions}</div>` : ""}
+            ${slots.map((s) => opts[s])}
         </ak-empty-state>
     `;
 }

src/ak-empty-state/ak-empty-state.component.ts

@@ -62,13 +62,14 @@ export class EmptyState extends LitElement {
     @property({ type: Boolean, attribute: "text-only" })
     public textOnly = false;
 
-    @property({ type: Boolean, reflect: true, attribute: "spinner-only" })
+    @property({ type: Boolean, attribute: "spinner-only" })
     public spinnerOnly = false;
 
     @property({ type: Boolean })
     public loading = false;
 
-    @property({ type: String })
+    // A case where external manipulation of must be reflected to trigger CSS effects.
+    @property({ type: String, reflect: true })
     public size: EmptyStateSize = "lg";
 
     #onSlotChange = () => {

src/ak-empty-state/ak-empty-state.stories.ts

@@ -309,25 +309,28 @@ export const HelperFunction: Story = {
     render: () => html`
         <div style="display: flex; flex-direction: column; gap: 2rem;">
             ${akEmptyState({
-                icon: html`<ak-icon icon="fa fa-beer"></ak-icon>`,
+                icon: html`<ak-icon slot="icon" icon="fa fa-beer"></ak-icon>`,
                 title: "Hold My Beer",
                 body: "I saw this in a cartoon once. I'm sure I can pull it off.",
-                actions: html`<button>Leave The Scene Immediately</button>`,
+                actions: html`<button slot="actions">Leave The Scene Immediately</button>`,
             })}
             ${akEmptyState({
                 size: "sm",
                 textOnly: true,
-                title: html`<h3>Without Icon</h3>`,
-                body: html`<p>Created using the helper function with textOnly=true</p>`,
-                actions: html`<button>Action Button</button>`,
+                title: html`<h3 slot="title">Without Icon</h3>`,
+                body: html`<p slot="body">Created using the helper function with textOnly=true</p>`,
+                actions: html`<button slot="actions">Action Button</button>`,
             })}
             ${akEmptyState({
                 size: "lg",
                 fullHeight: false,
-                title: html`<h2>Default Icon</h2>`,
-                body: html`<p>Using the default icon since none provided and textOnly=false</p>`,
-                actions: html`<button>Primary Action</button><button>Secondary Action</button>`,
-                footer: html`<a href="#">Learn more about this state</a>`,
+                title: html`<h2 slot="title">Default Icon</h2>`,
+                body: html`<p slot="body">
+                    Using the default icon since none provided and textOnly=false
+                </p>`,
+                actions: html`<button slot="actions">Primary Action</button
+                    ><button>Secondary Action</button>`,
+                footer: html`<a href="#" slot="footer">Learn more about this state</a>`,
             })}
         </div>
     `,

src/ak-tooltip/ak-tooltip.component.ts

@@ -144,7 +144,7 @@ export class Tooltip extends LitElement {
      * @attr {object} target: A reference to the target. Must be in the same or in a sibling context
        of the tooltip.  `.target` takes precedence over `for`
      */
-    @property({ type: Object, attribute: "target" })
+    @property({ type: Object })
     public target?: HTMLElement;
 
     /**