@volksverpetzer/ui-web 0.12.0 → 0.13.0

package/dist/Badge.css

@@ -58,3 +58,31 @@
   background: color-mix(in srgb, var(--vvp-pruefpunkt, #442674) 15%, white);
   color: var(--vvp-pruefpunkt, #442674);
 }
+
+/*
+ * Dark mode: the light-mode formula above mixes toward literal `white`,
+ * which is theme-independent. Dark-mode brand colors are deliberately
+ * lightened for legibility on a near-black page, so mixed with `white` at
+ * 15% they lose too much contrast against their own text color (as low as
+ * ~2:1 for some variant/brand pairings, against a 4.5:1 requirement).
+ *
+ * Each variant below uses whichever tint direction and percentage clears
+ * 4.5:1 for both Volksverpetzer and Mimikama's dark palettes (verified with
+ * the WCAG contrast formula) — primary and accent read fine tinted toward
+ * white, error and pruefpunkt need black instead.
+ */
+.dark .vvp-ui-badge--primary {
+  background: color-mix(in srgb, var(--vvp-primary, #1b7194) 5%, white);
+}
+
+.dark .vvp-ui-badge--accent {
+  background: #fff;
+}
+
+.dark .vvp-ui-badge--error {
+  background: color-mix(in srgb, var(--vvp-error, #ef5350) 15%, black);
+}
+
+.dark .vvp-ui-badge--pruefpunkt {
+  background: color-mix(in srgb, var(--vvp-pruefpunkt, #8b5cf6) 10%, black);
+}

package/dist/Button.css

@@ -56,8 +56,8 @@
 
 .vvp-ui-btn--ghost {
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
-  border: 2px solid var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
+  border: 2px solid var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-btn--ghost:hover:not(:disabled) {

package/dist/LinkButton.css

@@ -13,7 +13,7 @@
 .vvp-ui-linkbtn {
   border-radius: var(--vvp-radius-md, 12px);
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
   border: 1.5px solid var(--vvp-surface, #e2f0f5);
   box-shadow: var(
     --vvp-elevation-accent-rest,

package/dist/PillGroup.css

@@ -0,0 +1,52 @@
+.vvp-ui-pill-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--vvp-spacing-sm, 8px);
+}
+
+.vvp-ui-pill-group__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--vvp-surface, #e2f0f5);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  font-family: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.vvp-ui-pill-group[data-size="md"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-xl, 20px);
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
+.vvp-ui-pill-group[data-size="sm"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+}
+
+.vvp-ui-pill-group__option:hover:not(:disabled) {
+  border-color: var(--vvp-primary-muted, #3893c0);
+}
+
+.vvp-ui-pill-group__option:focus-visible {
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
+}
+
+.vvp-ui-pill-group__option:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vvp-ui-pill-group__option[aria-checked="true"] {
+  background: var(--vvp-primary, #1b7194);
+  border-color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}

package/dist/PillGroup.d.ts

@@ -0,0 +1,25 @@
+import "./PillGroup.css";
+export interface PillGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface PillGroupProps {
+    /** Visually hidden unless `label` is also rendered by the consumer via `aria-labelledby` — falls back to this as the accessible name. */
+    "aria-label"?: string;
+    options: PillGroupOption[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A row of pill-shaped options for choosing one of a small, fixed set of
+ * values — the house alternative to a native `<select>` (see vvp_app's
+ * "pills over dropdowns" convention, now ported to web). Implements the
+ * ARIA APG radiogroup pattern: one `role="radio"` per pill, roving
+ * tabindex, and Left/Right (and Up/Down) arrow keys move both focus and
+ * selection, matching native `<select>`/radio-group keyboard behavior.
+ */
+export declare function PillGroup({ "aria-label": ariaLabel, options, value, onChange, size, disabled, className, }: PillGroupProps): import("react").JSX.Element;

package/dist/PillGroup.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import "./PillGroup.css";
+/**
+ * A row of pill-shaped options for choosing one of a small, fixed set of
+ * values — the house alternative to a native `<select>` (see vvp_app's
+ * "pills over dropdowns" convention, now ported to web). Implements the
+ * ARIA APG radiogroup pattern: one `role="radio"` per pill, roving
+ * tabindex, and Left/Right (and Up/Down) arrow keys move both focus and
+ * selection, matching native `<select>`/radio-group keyboard behavior.
+ */
+export function PillGroup({ "aria-label": ariaLabel, options, value, onChange, size = "md", disabled = false, className, }) {
+    const groupId = useId();
+    const selectNext = (fromIndex, direction) => {
+        const enabled = options
+            .map((opt, i) => ({ opt, i }))
+            .filter(({ opt }) => !opt.disabled);
+        if (enabled.length === 0)
+            return;
+        const currentPos = enabled.findIndex(({ i }) => i === fromIndex);
+        const nextPos = (currentPos + direction + enabled.length) % enabled.length;
+        const next = enabled[nextPos];
+        if (next)
+            onChange(next.opt.value);
+    };
+    const handleKeyDown = (e, i) => {
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                e.preventDefault();
+                selectNext(i, 1);
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                e.preventDefault();
+                selectNext(i, -1);
+                break;
+        }
+    };
+    const classes = ["vvp-ui-pill-group", className].filter(Boolean).join(" ");
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: classes, "data-size": size, children: options.map((option, i) => {
+            const checked = option.value === value;
+            return (_jsx("button", { id: `${groupId}-${option.value}`, type: "button", role: "radio", "aria-checked": checked, disabled: disabled || option.disabled, tabIndex: checked ? 0 : -1, className: "vvp-ui-pill-group__option", onClick: () => onChange(option.value), onKeyDown: (e) => handleKeyDown(e, i), children: option.label }, option.value));
+        }) }));
+}

package/dist/ThemeToggle.css

@@ -3,4 +3,13 @@
   top: var(--vvp-spacing-lg, 16px);
   right: var(--vvp-spacing-lg, 16px);
   z-index: 50;
+  /* Ghost buttons default to a transparent background, which disappears
+     against busy page backgrounds (e.g. crowdfunding.volksverpetzer.de).
+     The toggle floats over arbitrary host content, so it needs an
+     explicit, opaque background rather than inheriting the ghost variant's. */
+  background: var(--vvp-background, #fff);
+}
+
+.vvp-ui-theme-toggle:hover:not(:disabled) {
+  background: var(--vvp-surface, #e2f0f5);
 }

package/dist/ToolPage.css

@@ -122,7 +122,7 @@
 .vvp-ui-tool-page__icon {
   display: inline-flex;
   align-items: center;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-tool-page__tags {

package/dist/index.d.ts

@@ -8,4 +8,5 @@ export { Alert, type AlertProps, type AlertVariant } from "./Alert";
 export { Slider, type SliderProps } from "./Slider";
 export { ThemeToggle } from "./ThemeToggle";
 export { InputButton, type InputButtonProps } from "./InputButton";
+export { PillGroup, type PillGroupProps, type PillGroupOption, } from "./PillGroup";
 export { ToolPage, type ToolPageProps, type ToolPageTag } from "./ToolPage";

package/dist/index.js

@@ -8,4 +8,5 @@ export { Alert } from "./Alert";
 export { Slider } from "./Slider";
 export { ThemeToggle } from "./ThemeToggle";
 export { InputButton } from "./InputButton";
+export { PillGroup, } from "./PillGroup";
 export { ToolPage } from "./ToolPage";

package/dist/styles.css

@@ -74,6 +74,34 @@
   color: var(--vvp-pruefpunkt, #442674);
 }
 
+/*
+ * Dark mode: the light-mode formula above mixes toward literal `white`,
+ * which is theme-independent. Dark-mode brand colors are deliberately
+ * lightened for legibility on a near-black page, so mixed with `white` at
+ * 15% they lose too much contrast against their own text color (as low as
+ * ~2:1 for some variant/brand pairings, against a 4.5:1 requirement).
+ *
+ * Each variant below uses whichever tint direction and percentage clears
+ * 4.5:1 for both Volksverpetzer and Mimikama's dark palettes (verified with
+ * the WCAG contrast formula) — primary and accent read fine tinted toward
+ * white, error and pruefpunkt need black instead.
+ */
+.dark .vvp-ui-badge--primary {
+  background: color-mix(in srgb, var(--vvp-primary, #1b7194) 5%, white);
+}
+
+.dark .vvp-ui-badge--accent {
+  background: #fff;
+}
+
+.dark .vvp-ui-badge--error {
+  background: color-mix(in srgb, var(--vvp-error, #ef5350) 15%, black);
+}
+
+.dark .vvp-ui-badge--pruefpunkt {
+  background: color-mix(in srgb, var(--vvp-pruefpunkt, #8b5cf6) 10%, black);
+}
+
 .vvp-ui-btn {
   display: inline-flex;
   align-items: center;
@@ -132,8 +160,8 @@
 
 .vvp-ui-btn--ghost {
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
-  border: 2px solid var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
+  border: 2px solid var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-btn--ghost:hover:not(:disabled) {
@@ -258,7 +286,7 @@
 .vvp-ui-linkbtn {
   border-radius: var(--vvp-radius-md, 12px);
   background: transparent;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
   border: 1.5px solid var(--vvp-surface, #e2f0f5);
   box-shadow: var(
     --vvp-elevation-accent-rest,
@@ -281,6 +309,59 @@
   );
 }
 
+.vvp-ui-pill-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--vvp-spacing-sm, 8px);
+}
+
+.vvp-ui-pill-group__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--vvp-surface, #e2f0f5);
+  border-radius: var(--vvp-radius-full, 9999px);
+  background: var(--vvp-background, #fff);
+  color: var(--vvp-text, #111);
+  font-family: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.vvp-ui-pill-group[data-size="md"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-md, 10px) var(--vvp-spacing-xl, 20px);
+  font-size: var(--vvp-font-size-base, 16px);
+}
+
+.vvp-ui-pill-group[data-size="sm"] .vvp-ui-pill-group__option {
+  padding: var(--vvp-spacing-sm, 8px) var(--vvp-spacing-lg, 16px);
+  font-size: var(--vvp-font-size-sm, 14px);
+}
+
+.vvp-ui-pill-group__option:hover:not(:disabled) {
+  border-color: var(--vvp-primary-muted, #3893c0);
+}
+
+.vvp-ui-pill-group__option:focus-visible {
+  outline: 2px solid var(--vvp-primary-muted, #3893c0);
+  outline-offset: 2px;
+}
+
+.vvp-ui-pill-group__option:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.vvp-ui-pill-group__option[aria-checked="true"] {
+  background: var(--vvp-primary, #1b7194);
+  border-color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-on-primary, #fff);
+}
+
 .vvp-ui-progress {
   width: 100%;
   text-align: center;
@@ -430,6 +511,15 @@
   top: var(--vvp-spacing-lg, 16px);
   right: var(--vvp-spacing-lg, 16px);
   z-index: 50;
+  /* Ghost buttons default to a transparent background, which disappears
+     against busy page backgrounds (e.g. crowdfunding.volksverpetzer.de).
+     The toggle floats over arbitrary host content, so it needs an
+     explicit, opaque background rather than inheriting the ghost variant's. */
+  background: var(--vvp-background, #fff);
+}
+
+.vvp-ui-theme-toggle:hover:not(:disabled) {
+  background: var(--vvp-surface, #e2f0f5);
 }
 
 .vvp-ui-tool-page {
@@ -556,7 +646,7 @@
 .vvp-ui-tool-page__icon {
   display: inline-flex;
   align-items: center;
-  color: var(--vvp-primary, #1b7194);
+  color: var(--vvp-link-text, #1b7194);
 }
 
 .vvp-ui-tool-page__tags {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volksverpetzer/ui-web",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Shared brand-visible React components (Button, Badge, Card, ProgressBar, Input, Alert, Slider, ThemeToggle, InputButton) for vvp_link_shortener, vvp_divi5_extensions, crowdfunding, and vectorcrawl. Plain, hand-scoped CSS (vvp-ui-* class prefix) consuming the --vvp-* custom properties emitted by @volksverpetzer/design-tokens — no Tailwind classes, so it drops into a Tailwind app and Divi's WordPress-embedded CSS alike.",
   "type": "module",
   "license": "MIT",
@@ -27,8 +27,8 @@
     "react": ">=19"
   },
   "devDependencies": {
-    "@types/react": "^19.2.18",
-    "react": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "react": "^19.3.0",
     "typescript": "^6.0.3"
   },
   "scripts": {