@cloudware-de/gatekeeper-widget 0.0.0-stage → 0.1.0

package/src/element/states.ts

@@ -0,0 +1,73 @@
+/**
+ * T-204 UI-Zustände und getrennte ARIA-Labels (Artikel 10).
+ * Spec: specs/002-widget/tasks.md T-204
+ * Spec: specs/002-widget/spec.md §Öffentliches Custom-Element-API
+ */
+export const WIDGET_UI_STATES = [
+  "idle",
+  "working",
+  "success",
+  "error",
+  "timeout",
+] as const;
+
+export type WidgetUiState = (typeof WIDGET_UI_STATES)[number];
+
+export const ARIA_LABELS: Readonly<Record<WidgetUiState, string>> = {
+  idle: "Cloudware Gatekeeper: nicht bestätigt",
+  working: "Cloudware Gatekeeper: Prüfung läuft",
+  success: "Cloudware Gatekeeper: bestätigt",
+  error: "Cloudware Gatekeeper: Prüfung fehlgeschlagen",
+  timeout: "Cloudware Gatekeeper: Zeitüberschreitung",
+};
+
+export function isWidgetUiState(value: string): value is WidgetUiState {
+  return (WIDGET_UI_STATES as readonly string[]).includes(value);
+}
+
+export function labelForState(state: WidgetUiState): string {
+  return ARIA_LABELS[state];
+}
+
+/** T-204-Default. Attribut `missing-token` überschreibt (leer = Default). */
+export const TOKEN_MISSING_MESSAGE =
+  "Cloudware Gatekeeper: Bitte zuerst die Prüfung abschließen.";
+
+export interface CopyHost {
+  getAttribute(name: string): string | null;
+}
+
+/**
+ * Idle/success dürfen per Attribut überschrieben werden.
+ * working / error / timeout bleiben T-204.
+ * Spec: specs/002-widget/spec.md §Öffentliches Custom-Element-API
+ */
+export function labelForHost(host: CopyHost, state: WidgetUiState): string {
+  if (state === "idle") {
+    const override = host.getAttribute("label-unchecked")?.trim() ?? "";
+    if (override.length > 0) {
+      return override;
+    }
+  }
+  if (state === "success") {
+    const override = host.getAttribute("label-checked")?.trim() ?? "";
+    if (override.length > 0) {
+      return override;
+    }
+  }
+  return ARIA_LABELS[state];
+}
+
+export function missingTokenMessage(host: CopyHost): string {
+  const override = host.getAttribute("missing-token")?.trim() ?? "";
+  return override.length > 0 ? override : TOKEN_MISSING_MESSAGE;
+}
+
+/** Challenge-TTL (300 s), nicht T-210 Hard-Timeout. Attribut `expired-challenge`. */
+export const CHALLENGE_EXPIRED_MESSAGE =
+  "Cloudware Gatekeeper: Challenge abgelaufen — bitte erneut versuchen";
+
+export function challengeExpiredMessage(host: CopyHost): string {
+  const override = host.getAttribute("expired-challenge")?.trim() ?? "";
+  return override.length > 0 ? override : CHALLENGE_EXPIRED_MESSAGE;
+}

package/src/element/templates/compact.css

@@ -0,0 +1,4 @@
+:host([data-template="compact"]) { font-size: 0.875rem; max-width: 16rem; }
+:host([data-template="compact"]) .gk { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.35rem 0.5rem; }
+:host([data-template="compact"]) .gk-box { width: 1.25rem; height: 1.25rem; min-width: 20px; min-height: 20px; }
+:host([data-template="compact"]) .gk-load { margin: 0.2rem 0 0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

package/src/element/templates/contrast.css

@@ -0,0 +1,5 @@
+:host([data-template="contrast"]) { color: #f4f4f4; }
+:host([data-template="contrast"]) .gk { background: #0a0a0a; border: 2px solid #f4f4f4; }
+:host([data-template="contrast"]) .gk:focus-within { outline: 3px solid #ff0; outline-offset: 2px; }
+:host([data-template="contrast"]) .gk-box { width: 1.35rem; height: 1.35rem; accent-color: #f4f4f4; }
+:host([data-template="contrast"]) .gk-load { color: #e8e8e8; }

package/src/element/templates/host.ts

@@ -0,0 +1,11 @@
+/**
+ * data-template am Shadow-Host. Nur Darstellung.
+ * Spec: specs/002-widget/spec.md §Öffentliches Custom-Element-API
+ */
+import { parseTemplate, type WidgetTemplate } from "./names.js";
+
+export function applyTemplateToHost(host: HTMLElement): WidgetTemplate {
+  const name = parseTemplate(host.getAttribute("template"));
+  host.setAttribute("data-template", name);
+  return name;
+}

package/src/element/templates/names.ts

@@ -0,0 +1,23 @@
+/**
+ * Drei Looks. Unbekannt → standard.
+ * Spec: specs/002-widget/spec.md §Öffentliches Custom-Element-API
+ */
+export const TEMPLATE_STANDARD = "standard" as const;
+export const TEMPLATE_COMPACT = "compact" as const;
+export const TEMPLATE_CONTRAST = "contrast" as const;
+
+export const WIDGET_TEMPLATES = [
+  TEMPLATE_STANDARD,
+  TEMPLATE_COMPACT,
+  TEMPLATE_CONTRAST,
+] as const;
+
+export type WidgetTemplate = (typeof WIDGET_TEMPLATES)[number];
+
+export function parseTemplate(raw: string | null | undefined): WidgetTemplate {
+  const value = raw?.trim();
+  if (value === TEMPLATE_COMPACT || value === TEMPLATE_CONTRAST) {
+    return value;
+  }
+  return TEMPLATE_STANDARD;
+}

package/src/element/templates/sheets.ts

@@ -0,0 +1,28 @@
+/**
+ * Shadow-CSS der drei Looks. tsc kann keine .css-Imports.
+ * Inhalt muss mit standard.css / compact.css / contrast.css übereinstimmen.
+ * Spec: specs/002-widget/spec.md §Öffentliches Custom-Element-API
+ */
+export const STANDARD_CSS = `:host { display: inline-block; font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.4; color: #111; max-width: 22rem; }
+.gk { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid #444; border-radius: 4px; background: #fff; }
+.gk-box { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: #111; }
+.gk-label { user-select: none; }
+.gk-load { margin: 0.4rem 0 0; padding: 0 0.15rem; font-size: 0.8rem; line-height: 1.35; color: #333; }
+`;
+
+export const COMPACT_CSS = `:host([data-template="compact"]) { font-size: 0.875rem; max-width: 16rem; }
+:host([data-template="compact"]) .gk { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.35rem 0.5rem; }
+:host([data-template="compact"]) .gk-box { width: 1.25rem; height: 1.25rem; min-width: 20px; min-height: 20px; }
+:host([data-template="compact"]) .gk-load { margin: 0.2rem 0 0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+`;
+
+export const CONTRAST_CSS = `:host([data-template="contrast"]) { color: #f4f4f4; }
+:host([data-template="contrast"]) .gk { background: #0a0a0a; border: 2px solid #f4f4f4; }
+:host([data-template="contrast"]) .gk:focus-within { outline: 3px solid #ff0; outline-offset: 2px; }
+:host([data-template="contrast"]) .gk-box { width: 1.35rem; height: 1.35rem; accent-color: #f4f4f4; }
+:host([data-template="contrast"]) .gk-load { color: #e8e8e8; }
+`;
+
+export function combinedLookCss(): string {
+  return `${STANDARD_CSS}${COMPACT_CSS}${CONTRAST_CSS}`;
+}

package/src/element/templates/standard.css

@@ -0,0 +1,5 @@
+:host { display: inline-block; font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.4; color: #111; max-width: 22rem; }
+.gk { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid #444; border-radius: 4px; background: #fff; }
+.gk-box { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: #111; }
+.gk-label { user-select: none; }
+.gk-load { margin: 0.4rem 0 0; padding: 0 0.15rem; font-size: 0.8rem; line-height: 1.35; color: #333; }