Merge branch 'main' into element/ak-empty-state

* main:
  Not sure why tests are failing.
  Trying test fix.
  element/ak-timestamp: consistency pass and final check
  element/ak-divider: consistency check and test update
  elements: structural issues
  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

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);
+}