Merge branch 'main' into element/ak-spinner

* main:
  element/ak-timestamp: consistency pass and final check
  element/ak-divider: consistency check and test update
  elements: structural issues
  Documentation update
  Applies the new vitest suite to ak-timestamp.
  element: ak-timeout
  And divider is now themable and dark-mode capable.
  Updating for release.
  Fixed some lint.
  Lint and prettier pass.  Found a few disconnects, fixed them.
  Adding the timestamp component.
  Remove custom registration, run prettier, remove old CSS.
  Ported from foundation, and heavily revised.  An analysis of the CSS revealed it was far more complicated than it needed to be; using the Patternfly trick of communicating embedded state through scoped variables names turned out to be much more coherent.

Author: kensternberg-authentik

docs/component-files.md

@@ -36,9 +36,9 @@ The following files will be found in almost all components:
 
 The following files can be found with most components:
 
-- `ak-component.test.ts`: A WebdriverIO test file. Not always present; WebdriverIO, the shadowDOM,
-  and events like mouse-in/mouse-out or timing-based components should have strong storybook demos
-  instead so developers can affirm that a component behaves as expected.
+- `ak-component.test.ts`: A Vitest-and-Playwright test file. Not always present; Playwright, the
+  shadowDOM, and events like mouse-in/mouse-out or timing-based components should have strong
+  storybook demos instead so developers can affirm that a component behaves as expected.
 - `ak-component.wcc.yaml`: A WCCSS file. These files document _what_ we did to convert Patternfly-5
   to a shadowDOM-friendly format. The WCCSS program in the `./tools-src` folder automatically:
     - splits a component's React-oriented CSS into a file defining component-namespaced CSS custom

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

@@ -4,11 +4,6 @@ import { html, LitElement } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-export interface IBrand {
-    src?: string;
-    alt?: string;
-}
-
 /**
  * @summary A **brand** is an image used to identify an organization, corporation or project.
  *
@@ -27,15 +22,15 @@ export interface IBrand {
  * @cssprop --ak-v1-c-brand--Height-on-xl - Height on extra large screens (≥1200px)
  * @cssprop --ak-v1-c-brand--Height-on-2xl - Height on 2x large screens (≥1450px)
  */
-export class Brand extends LitElement implements IBrand {
+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

@@ -29,7 +29,7 @@ export type ButtonSeverity = (typeof buttonSeverity)[number];
 /**
  * Optional button sizes
  */
-export const buttonSize = ["sm", "lg"] as const;
+export const buttonSize = ["sm", "md", "lg"] as const;
 export type ButtonSize = (typeof buttonSize)[number];
 
 /**
@@ -38,18 +38,6 @@ export type ButtonSize = (typeof buttonSize)[number];
 export const buttonType = ["button", "submit", "reset"] as const;
 export type ButtonType = (typeof buttonType)[number];
 
-export interface IButton {
-    download?: string;
-    href?: string;
-    label?: string;
-    name?: string;
-    rel?: string;
-    target?: string;
-    type?: ButtonType;
-    value?: string;
-    variant?: ButtonVariant;
-}
-
 /**
  * @element ak-button
  *
@@ -67,8 +55,9 @@ export interface IButton {
  *   - "danger": Red styling for destructive actions
  *   - "warning": Yellow styling for cautionary actions
  * @attr {ButtonSize} size - Button size: "sm", "lg"
- *   - "small": Smaller than default. Used for compact settings.
- *   - "large": Larger than default. Used for CTAs.
+ *   - "sm": Smaller than default. Used for compact settings.
+ *   - "md": Medium (the default)
+ *   - "lg": Larger than default. Used for CTAs.
  * @attr {string} name - Name attribute for the button
  * @attr {string} value - Value attribute when button is part of a form
  * @attr {string} label - Aria-accessible label for the button
@@ -115,11 +104,14 @@ export interface IButton {
  * @cssprop --pf-v5-c-button--m-warning--BackgroundColor - Warning severity background color
  * @cssprop --pf-v5-c-button--m-warning--Color - Warning severity text color
  */
-export class Button extends LitElement implements IButton {
+export class Button extends LitElement {
     static readonly styles = [styles];
 
     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-divider/ak-divider.builder.ts

@@ -0,0 +1,30 @@
+import { type DividerOrientation, type DividerVariant } from "./ak-divider.component.js";
+
+import { html, TemplateResult } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+export type DividerProps = {
+    variant?: DividerVariant;
+    orientation?: DividerOrientation;
+    content?: string | TemplateResult;
+};
+
+/**
+ * @summary Helper function to create a Divider component programmatically
+ *
+ * @returns {TemplateResult} A Lit template result containing the configured ak-divider element
+ *
+ * @see {@link Divider} - The underlying web component
+ */
+export function akDivider(options: DividerProps = {}) {
+    const { variant, orientation, content } = 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)}
+            >${message}</ak-divider
+        >
+    `;
+}

src/ak-divider/ak-divider.component.ts

@@ -0,0 +1,59 @@
+import { AkLitElement } from "../component-base.js";
+import styles from "./ak-divider.css";
+
+import { html } from "lit";
+
+// These are documented here because they are used by the builder as type constraints. They have
+// only visual consequences, so there's no need for them in the component's codebase.
+
+export const dividerVariant = ["default", "strong", "subtle"] as const;
+export type DividerVariant = (typeof dividerVariant)[number];
+
+export const dividerOrientation = ["horizontal", "vertical"] as const;
+export type DividerOrientation = (typeof dividerOrientation)[number];
+
+/**
+ * @element ak-divider
+ * @summary A visual divider that creates thematic breaks or separation between content sections
+ *
+ * @attr {string} variant - Visual style variant: "default", "strong", "subtle"
+ * @attr {string} orientation - Layout orientation: "horizontal", "vertical"
+ *
+ * @slot - Optional content to display in the middle of the divider line
+ *
+ * @csspart divider - The main container element for the divider
+ * @csspart line - The line elements (before and after content if content exists)
+ * @csspart line start - The line element before content (when content is present)
+ * @csspart line end - The line element after content (when content is present)
+ * @csspart content - The wrapper around the slotted content
+ *
+ * @cssprop --pf-v5-c-divider--line-thickness - Width/thickness of the divider line
+ * @cssprop --pf-v5-c-divider--color - Default color of the divider line
+ * @cssprop --pf-v5-c-divider--strong-color - Color for the "strong" variant
+ * @cssprop --pf-v5-c-divider--subtle-color - Color for the "subtle" variant
+ * @cssprop --pf-v5-c-divider--display - Display type for the host element
+ * @cssprop --pf-v5-c-divider--flex-direction - Flex direction for the divider container
+ * @cssprop --pf-v5-c-divider--content-spacing - Spacing between content and lines
+ * @cssprop --pf-v5-c-divider--height - Height of the divider component
+ * @cssprop --pf-v5-c-divider--margin - Margin around the divider
+ * @cssprop --pf-v5-c-divider__line--before--top - Top position of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--left - Left position of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--right - Right position of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--width - Width of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--height - Height of the line pseudo-element
+ */
+export class Divider extends AkLitElement {
+    static readonly styles = [styles];
+
+    render() {
+        // The `null` slot means use the unnamed slot; usually only for one-slot components.
+        const hasContent = this.hasSlotted(null);
+        return html`<div part="divider">
+            ${hasContent
+                ? html` <span part="line start"></span>
+                      <span part="content"><slot></slot></span>
+                      <span part="line end"></span>`
+                : html` <span part="line"></span> `}
+        </div> `;
+    }
+}

src/ak-divider/ak-divider.css

@@ -0,0 +1,76 @@
+:host {
+    --divider--line-thickness: var(--pf-v5-c-divider--line-thickness, 1px);
+    --divider--color: var(--pf-v5-c-divider--color, #d2d2d2);
+    --divider--strong-color: var(--pf-v5-c-divider--strong-color, #8a8d90);
+    --divider--subtle-color: var(--pf-v5-c-divider--subtle-color, #ededed);
+    --divider--display: var(--pf-v5-c-divider--display, flex);
+    --divider--flex-direction: var(--pf-v5-c-divider--flex-direction, row);
+    --divider--content-spacing: var(--pf-v5-c-divider--content-spacing, 0.35rem);
+    --divider--height: var(--pf-v5-c-divider--height, auto);
+    --divider__line--before--top: var(--pf-v5-c-divider__line--before--top, 50%);
+    --divider__line--before--left: var(--pf-v5-c-divider__line--before--left, 0);
+    --divider__line--before--width: var(--pf-v5-c-divider__line--before--width, 100%);
+    --divider--margin: var(--divider--content-spacing) 0;
+    --divider__line--before--height: var(--divider--line-thickness);
+}
+
+:host([orientation="vertical"]) {
+    --divider--display: inline-flex;
+    --divider--flex-direction: column;
+    --divider--content-spacing: 0.2rem;
+    --divider--height: 100%;
+    --divider--margin: 0 var(--divider--content-spacing);
+    --divider__line--before--top: 0;
+    --divider__line--before--left: 50%;
+    --divider__line--before--width: var(--divider--line-thickness);
+    --divider__line--before--height: 100%;
+}
+
+:host {
+    display: var(--divider--display);
+    height: var(--divider--height);
+    margin: var(--divider--margin);
+}
+
+/* Base divider container styles */
+[part="divider"] {
+    align-items: center;
+    display: flex;
+    flex-direction: var(--divider--flex-direction);
+    width: 100%;
+    height: var(--divider--height);
+}
+
+[part*="line"] {
+    flex-grow: 1;
+    position: relative;
+}
+
+[part*="line"]::before {
+    content: "";
+    position: absolute;
+    background-color: var(--divider--color);
+    left: var(--divider__line--before--left);
+    top: var(--divider__line--before--top);
+    width: var(--divider__line--before--width);
+    height: var(--divider__line--before--height);
+}
+
+[part="content"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--divider--content-spacing);
+}
+
+::slotted(*) {
+    color: var(--divider--color);
+}
+
+:host([variant="strong"]) {
+    --divider--color: var(--divider--strong-color);
+}
+
+:host([variant="subtle"]) {
+    --divider--color: var(--divider--subtle-color);
+}

src/ak-divider/ak-divider.root.css

@@ -0,0 +1,20 @@
+:root {
+    --pf-v5-c-divider--line-thickness: 1px;
+    --pf-v5-c-divider--color: var(--pf-v5-global--BorderColor--100, #d2d2d2);
+    --pf-v5-c-divider--strong-color: var(--pf-v5-global--BorderColor--light-100, #8a8d90);
+    --pf-v5-c-divider--subtle-color: var(--pf-v5-global--BorderColor--300, #ededed);
+    --pf-v5-c-divider--display: flex;
+    --pf-v5-c-divider--flex-direction: row;
+    --pf-v5-c-divider--content-spacing: 0.35rem;
+    --pf-v5-c-divider--height: auto;
+    --pf-v5-c-divider__line--before--top: 50%;
+    --pf-v5-c-divider__line--before--left: 0;
+    --pf-v5-c-divider__line--before--width: 100%;
+    --pf-v5-c-divider__line--before--height: var(--pf-v5-c-divider--line-thickness);
+}
+
+html[theme="dark"] {
+    --pf-v5-c-divider--color: var(--pf-v5-global--BorderColor--100, #444548);
+    --pf-v5-c-divider--strong-color: var(--pf-v5-global--BorderColor--light-100, #1b1d21);
+    --pf-v5-c-divider--subtle-color: var(--pf-v5-global--BorderColor--300, #26292d);
+}