Conformance pass.

\# What

\# Why

\# How

\# Designs

\# Test Steps

\# Other Notes

Author: kensternberg-authentik

src/ak-brand/ak-brand.builder.ts

@@ -1,11 +1,12 @@
+import type { ElementRest } from "../types.js";
 import { Brand } from "./ak-brand.component.js";
 
 import { spread } from "@open-wc/lit-helpers";
 
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-export type BrandProps = Partial<HTMLElement> & Partial<Pick<Brand, "src" | "alt">>;
+export type BrandProps = ElementRest & Partial<Pick<Brand, "src" | "alt">>;
 
 /**
  * @summary Helper function to create a Brand component programmatically

src/ak-divider/ak-divider.builder.ts

@@ -1,9 +1,12 @@
+import type { ElementRest } from "../types.js";
 import { type DividerOrientation, type DividerVariant } from "./ak-divider.component.js";
 
+import { spread } from "@open-wc/lit-helpers";
+
 import { html, TemplateResult } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-export type DividerProps = {
+export type DividerProps = ElementRest & {
     variant?: DividerVariant;
     orientation?: DividerOrientation;
     content?: string | TemplateResult;
@@ -17,13 +20,16 @@ export type DividerProps = {
  * @see {@link Divider} - The underlying web component
  */
 export function akDivider(options: DividerProps = {}) {
-    const { variant, orientation, content } = options;
+    const { variant, orientation, content, ...rest } = options;
 
     // Handle string content by wrapping in a span
     const message = typeof content === "string" ? html`<span>${content.trim()}</span>` : content;
 
     return html`
-        <ak-divider variant=${ifDefined(variant)} orientation=${ifDefined(orientation)}
+        <ak-divider
+            ${spread(rest)}
+            variant=${ifDefined(variant)}
+            orientation=${ifDefined(orientation)}
             >${message}</ak-divider
         >
     `;

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

@@ -1,7 +1,9 @@
 import "./ak-empty-state.component.js";
 
+import type { ElementRest } from "../types.js";
 import { EmptyState } from "./ak-empty-state.component.js";
 
+import { spread } from "@open-wc/lit-helpers";
 import { match, P } from "ts-pattern";
 
 import { html, TemplateResult } from "lit";
@@ -18,9 +20,8 @@ export interface EmptyStateSlots {
     secondaryActions?: string | TemplateResult;
 }
 
-export type EmptyStateProps = Partial<
-    Pick<EmptyState, "size" | "loading" | "textOnly" | "spinnerOnly">
-> &
+export type EmptyStateProps = ElementRest &
+    Partial<Pick<EmptyState, "size" | "loading" | "textOnly" | "spinnerOnly">> &
     EmptyStateSlots & { fullHeight?: boolean };
 
 const SLOTNAMES: (keyof EmptyStateSlots)[] = [
@@ -46,7 +47,7 @@ type SlotContent = string | TemplateResult | undefined;
  *
  * @see {@link EmptyState} - The underlying web component
  */
-export function akEmptyState(options: EmptyStateProps) {
+export function akEmptyState(options: EmptyStateProps = {}) {
     const slots = SLOTNAMES.filter((s) => !!options[s]);
 
     const slotRenderer = (s: string, c: string | TemplateResult) => html`<div slot=${s}>${c}</div>`;
@@ -68,10 +69,11 @@ export function akEmptyState(options: EmptyStateProps) {
         ...Object.fromEntries(slots.map((s) => [s, slotHandler(s)])),
     };
 
-    const { size, fullHeight, spinnerOnly, textOnly, loading } = opts;
+    const { size, fullHeight, spinnerOnly, textOnly, loading, ...rest } = opts;
 
     return html`
         <ak-empty-state
+            ${spread(rest)}
             ?loading=${loading}
             ?full-height=${fullHeight}
             ?text-only=${textOnly}

src/ak-progress/ak-progress.builder.ts

@@ -1,22 +1,33 @@
 import "./ak-progress.component.js";
 
+import type { ElementRest } from "../types.js";
 import { Progress, ProgressBarSize } from "./ak-progress.component.js";
 
+import { spread } from "@open-wc/lit-helpers";
+
 import { html, nothing, TemplateResult } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 /* The `pick`ed fields here correspond to their types in the Progress class above. */
 
-export interface ProgressProps extends Partial<
-    Pick<
-        Progress,
-        "variant" | "severity" | "min" | "max" | "value" | "showIcon" | "oneWay" | "displayValue"
-    >
-> {
-    size?: ProgressBarSize;
-    label?: string | TemplateResult;
-    icon?: string | TemplateResult;
-}
+export type ProgressProps = ElementRest &
+    Partial<
+        Pick<
+            Progress,
+            | "variant"
+            | "severity"
+            | "min"
+            | "max"
+            | "value"
+            | "showIcon"
+            | "oneWay"
+            | "displayValue"
+        >
+    > & {
+        size?: ProgressBarSize;
+        label?: string | TemplateResult;
+        icon?: string | TemplateResult;
+    };
 
 /**
  * @summary Helper function to create a Progress component programmatically
@@ -38,10 +49,12 @@ export function akProgress(options: ProgressProps) {
         displayValue,
         label,
         icon,
+        ...rest
     } = options;
 
     return html`
         <ak-progress
+            ${spread(rest)}
             variant=${ifDefined(variant)}
             size=${ifDefined(size)}
             severity=${ifDefined(severity)}

src/ak-progress/ak-progress.component.ts

@@ -12,24 +12,12 @@ import { styleMap } from "lit/directives/style-map.js";
 export const progressBarVariants = ["none", "top", "inside", "outside", "indeterminate"] as const;
 export type ProgressBarVariant = (typeof progressBarVariants)[number];
 
-export const progressBarSize = ["xs", "sm", "lg"] as const;
+export const progressBarSize = ["xs", "sm", "md", "lg"] as const;
 export type ProgressBarSize = (typeof progressBarSize)[number];
 
 export const progressBarSeverity = ["success", "danger", "warning"] as const;
 export type ProgressBarSeverity = (typeof progressBarSeverity)[number];
 
-export interface IProgress {
-    variant?: ProgressBarVariant;
-    _size?: ProgressBarSize;
-    severity?: ProgressBarSeverity;
-    min?: number;
-    max?: number;
-    value?: number;
-    showIcon?: boolean;
-    oneWay?: boolean;
-    displayValue?: (_: number) => string;
-}
-
 const SEVERITY_ICONS = new Map<ProgressBarSeverity, string>([
     ["danger", "fa-times"],
     ["warning", "fa-exclamation-triangle"],
@@ -88,10 +76,10 @@ const SEVERITY_ICONS = new Map<ProgressBarSeverity, string>([
  * @cssprop --ak-v1-c-progress--m-xs__bar--Height - Height for xs size variant
  * @cssprop --ak-v1-c-progress--m-indeterminate--GridGap - Collapsed gap size for indeterminate variant
  */
-export class Progress extends AkLitElement implements IProgress {
+export class Progress extends AkLitElement {
     static readonly styles = [styles, indeterminateAnimation];
 
-    @property({ type: String })
+    @property({ type: String, reflect: true })
     public variant: ProgressBarVariant = "top";
 
     @property({ reflect: true })

src/ak-progress/ak-progress.stories.ts

@@ -27,7 +27,7 @@ const meta: Meta<Progress> = {
             options: ["none", "top", "inside", "outside"],
             description: "Position of the progress value display",
         },
-        _size: {
+        size: {
             control: { type: "select" },
             options: ["sm", "lg"],
             description: "Size variant of the progress bar",
@@ -566,7 +566,7 @@ export const BuilderCustomFormatting: Story = {
                 value: 387,
                 displayValue: (value: number) => `${value} MB / 500 MB`,
                 label: "Memory usage",
-                severity: (value) => (value > 400 ? "danger" : value > 300 ? "warning" : undefined),
+                severity: "warning",
             })}
             ${akProgress({
                 min: -10,

src/ak-progress/ak-progress.ts

@@ -1,6 +1,5 @@
 import { akProgress, type ProgressProps } from "./ak-progress.builder.js";
 import {
-    type IProgress,
     Progress,
     type ProgressBarSeverity,
     type ProgressBarSize,
@@ -9,7 +8,6 @@ import {
 
 export {
     akProgress,
-    type IProgress,
     Progress,
     type ProgressBarSeverity,
     type ProgressBarSize,

src/ak-spinner/ak-spinner.builder.ts

@@ -1,14 +1,18 @@
 import "./ak-spinner.js";
 
+import type { ElementRest } from "../types.js";
 import { type Spinner, type SpinnerSize } from "./ak-spinner.component.js";
 
+import { spread } from "@open-wc/lit-helpers";
+
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-export type SpinnerProps = Partial<Pick<Spinner, "label">> & {
-    inline?: boolean;
-    size?: SpinnerSize;
-};
+export type SpinnerProps = ElementRest &
+    Partial<Pick<Spinner, "label">> & {
+        inline?: boolean;
+        size?: SpinnerSize;
+    };
 
 /**
  * @summary Helper function to create a Spinner component programmatically
@@ -18,9 +22,10 @@ export type SpinnerProps = Partial<Pick<Spinner, "label">> & {
  * @see {@link Spinner} - The underlying web component
  */
 export function akSpinner(options: SpinnerProps = { inline: false }) {
-    const { size, label, inline } = options;
+    const { size, label, inline, ...rest } = options;
 
     return html`<ak-spinner
+        ${spread(rest)}
         size=${ifDefined(size)}
         label=${ifDefined(label)}
         ?inline=${!!inline}