@prokodo/ui 0.1.12 → 0.1.13

package/README.md

@@ -42,7 +42,7 @@
 - ✨ **Adaptive Island Components (AIC)**: A rendering strategy where each component loads only the JavaScript it needs — when needed.
 - ⚡️ **Modern stack**: Vite, React 19, TypeScript, and SCSS Modules
 - 💅 **Design consistency**: Theming via design tokens and BEM-style naming
-- 🧩 **Component-rich**: 40+ reusable UI components
+- 🧩 **Component-rich**: 50+ reusable UI components
 - 🧪 **Reliable**: Fully tested with Jest and Testing Library
 - 📚 **Storybook**: Explore the components at [ui.prokodo.com](https://ui.prokodo.com)
 - 📦 **Ready-to-install**: Distributed via npm for non-production use under the BUSL-1.1 license
@@ -161,6 +161,7 @@ export default function GalleryPage() {
 | Accordion           |               ✅               |                 ✅                 |
 | Animated            |               ✅               |                 ✅                 |
 | AnimatedText        |               ✅               |                 ✅                 |
+| Autocomplete        |               ✅               |                 ✅                 |
 | Avatar              |               ✅               |                 ✅                 |
 | BaseLink            |               ✅               |                 ✅                 |
 | Button              |               ✅               |                 ✅                 |
@@ -204,6 +205,7 @@ export default function GalleryPage() {
 | Stepper             |               ✅               |                 ✅                 |
 | Switch              |               ✅               |                 ✅                 |
 | Table               |               ✅               |                 –                  |
+| Tabs                |               ✅               |                 ✅                 |
 | Teaser              |               ✅               |                 -                  |
 | Tooltip             |               ✅               |                 ✅                 |
 
@@ -335,6 +337,7 @@ export default createLazyWrapper<NavbarProps>({
 - [ ] Add more ✨ **fancy styling**, UI polish and properties
 - [ ] Improve **accessibility** to meet **WCAG 2.2 AAA** standards
 - [ ] Detailed Documentation about the components
+- [x] Detailed Typescript-Model-Documentation about the components
 
 ## Examples (Next.js + Headless CMS)
 

package/dist/components/accordion/Accordion.css

@@ -138,6 +138,9 @@
   display: flex;
   flex-direction: column;
 }
+.prokodo-Accordion--panel {
+  gap: 0;
+}
 .prokodo-Accordion__item {
   border: 1px solid var(--color-grey-200);
   border-radius: 0.75rem;
@@ -149,6 +152,12 @@
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
 }
+.prokodo-Accordion__item--panel {
+  border-radius: 0;
+  margin-bottom: 0;
+  box-shadow: none;
+  border: none;
+}
 .prokodo-Accordion__header {
   display: flex;
   align-items: center;
@@ -209,6 +218,43 @@
   animation: none !important;
   box-shadow: var(--elevation-1);
 }
+.prokodo-Accordion__header__wrapper--panel {
+  position: relative;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white)));
+  border-radius: 0;
+}
+.prokodo-Accordion__header__wrapper--panel::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  background-size: 0% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  transition: background-size 0.35s ease;
+}
+.prokodo-Accordion__header__wrapper--panel:hover, .prokodo-Accordion__header__wrapper--panel:focus-visible {
+  animation: none;
+}
+.prokodo-Accordion__header__wrapper--panel:hover::after, .prokodo-Accordion__header__wrapper--panel:focus-visible::after {
+  background-size: 200% 100%;
+  animation: accordionBorderShift 2s linear;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded {
+  border-radius: 0;
+  box-shadow: none;
+  animation: none !important;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded::after {
+  background-size: 100% 100%;
+  background-position: 100% 0;
+  animation: none !important;
+}
 .prokodo-Accordion__title {
   width: calc(100% - 20px);
   margin: 0;

package/dist/components/accordion/Accordion.module.css

@@ -138,6 +138,9 @@
   display: flex;
   flex-direction: column;
 }
+.prokodo-Accordion--panel {
+  gap: 0;
+}
 .prokodo-Accordion__item {
   border: 1px solid var(--color-grey-200);
   border-radius: 0.75rem;
@@ -149,6 +152,12 @@
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
 }
+.prokodo-Accordion__item--panel {
+  border-radius: 0;
+  margin-bottom: 0;
+  box-shadow: none;
+  border: none;
+}
 .prokodo-Accordion__header {
   display: flex;
   align-items: center;
@@ -209,6 +218,43 @@
   animation: none !important;
   box-shadow: var(--elevation-1);
 }
+.prokodo-Accordion__header__wrapper--panel {
+  position: relative;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white)));
+  border-radius: 0;
+}
+.prokodo-Accordion__header__wrapper--panel::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  background-size: 0% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  transition: background-size 0.35s ease;
+}
+.prokodo-Accordion__header__wrapper--panel:hover, .prokodo-Accordion__header__wrapper--panel:focus-visible {
+  animation: none;
+}
+.prokodo-Accordion__header__wrapper--panel:hover::after, .prokodo-Accordion__header__wrapper--panel:focus-visible::after {
+  background-size: 200% 100%;
+  animation: accordionBorderShift 2s linear;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded {
+  border-radius: 0;
+  box-shadow: none;
+  animation: none !important;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded::after {
+  background-size: 100% 100%;
+  background-position: 100% 0;
+  animation: none !important;
+}
 .prokodo-Accordion__title {
   width: calc(100% - 20px);
   margin: 0;

package/dist/components/accordion/Accordion.module.scss.js

@@ -1,8 +1,10 @@
 const accordionBorderShift = "accordionBorderShift";
 const styles = {
   "prokodo-Accordion": "prokodo-Accordion",
+  "prokodo-Accordion--panel": "prokodo-Accordion--panel",
   "prokodo-Accordion__item": "prokodo-Accordion__item",
   "prokodo-Accordion__item--is-expanded": "prokodo-Accordion__item--is-expanded",
+  "prokodo-Accordion__item--panel": "prokodo-Accordion__item--panel",
   "prokodo-Accordion__header": "prokodo-Accordion__header",
   "prokodo-Accordion__header__toggle": "prokodo-Accordion__header__toggle",
   "prokodo-Accordion__header__actions": "prokodo-Accordion__header__actions",
@@ -11,6 +13,8 @@ const styles = {
   "prokodo-Accordion__header__wrapper": "prokodo-Accordion__header__wrapper",
   accordionBorderShift,
   "prokodo-Accordion__header__wrapper--is-expanded": "prokodo-Accordion__header__wrapper--is-expanded",
+  "prokodo-Accordion__header__wrapper--panel": "prokodo-Accordion__header__wrapper--panel",
+  "prokodo-Accordion__header__wrapper--panel--is-expanded": "prokodo-Accordion__header__wrapper--panel--is-expanded",
   "prokodo-Accordion__title": "prokodo-Accordion__title",
   "prokodo-Accordion__icon": "prokodo-Accordion__icon",
   "prokodo-Accordion__icon--is-hidden": "prokodo-Accordion__icon--is-hidden",

package/dist/components/accordion/Accordion.view.js

@@ -11,6 +11,9 @@ import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Accordion");
 function AccordionView({
   id,
+  type = "card",
+  headerWrapperClassName,
+  headerToggleClassName,
   variant = "primary",
   className,
   items,
@@ -24,7 +27,7 @@ function AccordionView({
     "div",
     {
       ...domRest,
-      className: bem(void 0, { [variant]: true }, className),
+      className: bem(void 0, { [variant]: true, [type]: true }, className),
       children: items.map((item, index) => {
         const {
           title,
@@ -49,18 +52,34 @@ function AccordionView({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: bem("item", { "is-expanded": isExpanded }, itemCls),
+            className: bem(
+              "item",
+              { "is-expanded": isExpanded, [type]: true },
+              itemCls
+            ),
             children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: bem("header__wrapper", { "is-expanded": isExpanded }),
+                  className: bem(
+                    "header__wrapper",
+                    {
+                      "is-expanded": isExpanded,
+                      [type]: true,
+                      [`${type}--is-expanded`]: isExpanded
+                    },
+                    headerWrapperClassName
+                  ),
                   children: /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      ...accHeaderProps,
-                      className: bem("header__toggle", { "is-expanded": isExpanded }),
                       id: `${accId}-header`,
+                      className: bem(
+                        "header__toggle",
+                        { "is-expanded": isExpanded },
+                        headerToggleClassName
+                      ),
+                      ...accHeaderProps,
                       children: [
                         !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
                           Headline,
@@ -118,6 +137,7 @@ function AccordionView({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
+                  "aria-label": title,
                   "aria-labelledby": `${accId}-header`,
                   className: bem("content", { "is-expanded": isExpanded }),
                   hidden: !isExpanded,

package/dist/components/autocomplete/Autocomplete.client.js

@@ -0,0 +1,132 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { AutocompleteView } from "./Autocomplete.view.js";
+function AutocompleteClient({
+  name,
+  value,
+  items,
+  minQueryLength = 2,
+  onChange,
+  onSelect,
+  ...rest
+}) {
+  const rootRef = useRef(null);
+  const [query, setQuery] = useState(value ?? "");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [listTop, setListTop] = useState(void 0);
+  useEffect(() => {
+    setQuery(value ?? "");
+  }, [value]);
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = /* @__PURE__ */ __name((event) => {
+      var _a;
+      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(event.target))) {
+        setOpen(false);
+      }
+    }, "onClickOutside");
+    window.addEventListener("mousedown", onClickOutside);
+    return () => window.removeEventListener("mousedown", onClickOutside);
+  }, [open]);
+  const list = useMemo(() => items ?? [], [items]);
+  const updateListAnchor = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const inputElement = root.querySelector(
+      `input[name="${name}"], textarea[name="${name}"]`
+    );
+    if (!inputElement) {
+      setListTop(void 0);
+      return;
+    }
+    const rootRect = root.getBoundingClientRect();
+    const inputRect = inputElement.getBoundingClientRect();
+    setListTop(inputRect.bottom - rootRect.top);
+  }, [name]);
+  useEffect(() => {
+    if (!open) return;
+    updateListAnchor();
+    const onLayoutChange = /* @__PURE__ */ __name(() => updateListAnchor(), "onLayoutChange");
+    window.addEventListener("resize", onLayoutChange);
+    window.addEventListener("scroll", onLayoutChange, true);
+    return () => {
+      window.removeEventListener("resize", onLayoutChange);
+      window.removeEventListener("scroll", onLayoutChange, true);
+    };
+  }, [open, query, updateListAnchor]);
+  const handleInputChange = useCallback(
+    (nextQuery) => {
+      setQuery(nextQuery);
+      setOpen(true);
+      setActiveIndex(0);
+      onChange == null ? void 0 : onChange({ query: nextQuery });
+    },
+    [onChange]
+  );
+  const handleSelectItem = useCallback(
+    (item) => {
+      setQuery(item.label);
+      setOpen(false);
+      onSelect == null ? void 0 : onSelect(item);
+    },
+    [onSelect]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex((previous) => Math.min(previous + 1, list.length - 1));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActiveIndex((previous) => Math.max(previous - 1, 0));
+        return;
+      }
+      if (event.key === "Enter" && open) {
+        event.preventDefault();
+        const selected = list[activeIndex];
+        if (!selected) return;
+        handleSelectItem(selected);
+      }
+    },
+    [activeIndex, handleSelectItem, list, open]
+  );
+  const clientState = {
+    open,
+    listTop,
+    activeIndex,
+    onInputChange: handleInputChange,
+    onInputFocus: /* @__PURE__ */ __name(() => {
+      if (query.trim().length >= minQueryLength) setOpen(true);
+    }, "onInputFocus"),
+    onInputKeyDown: handleKeyDown,
+    onSelectItem: handleSelectItem
+  };
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, children: /* @__PURE__ */ jsx(
+    AutocompleteView,
+    {
+      ...rest,
+      _clientState: clientState,
+      items: list,
+      minQueryLength,
+      name,
+      open,
+      value: query
+    }
+  ) });
+}
+__name(AutocompleteClient, "AutocompleteClient");
+const AutocompleteClient$1 = memo(AutocompleteClient);
+export {
+  AutocompleteClient$1 as default
+};

package/dist/components/autocomplete/Autocomplete.css

@@ -0,0 +1,317 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.prokodo-Autocomplete {
+  position: relative;
+}
+.prokodo-Autocomplete__inputWrap {
+  position: relative;
+  z-index: 41;
+  border-radius: 1.5rem;
+}
+.prokodo-Autocomplete__input {
+  width: 100%;
+}
+.prokodo-Autocomplete__input__inner--is-open, .prokodo-Autocomplete__input__node--is-open {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.prokodo-Autocomplete__input__inner--is-open {
+  background: var(--gradient-border-4);
+}
+.prokodo-Autocomplete__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% - 4px);
+  margin: 0;
+  padding: 0 2px 2px;
+  list-style: none;
+  transform: none;
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background: var(--gradient-border-4);
+  margin-top: -2px;
+  box-shadow: var(--elevation-3);
+  max-height: 260px;
+  overflow: auto;
+  z-index: 50;
+  animation: fade-in 180ms ease-out;
+  scrollbar-width: none;
+}
+.prokodo-Autocomplete__list::-webkit-scrollbar {
+  display: none;
+}
+.prokodo-Autocomplete__state {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.5rem 1rem 1rem 1rem;
+  background: var(--color-white);
+  color: var(--color-grey-700);
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Autocomplete__state {
+  background: rgb(16, 19, 27);
+  color: var(--color-grey-500);
+}
+.prokodo-Autocomplete__itemRow {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.prokodo-Autocomplete__itemRow--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item {
+  width: 100%;
+  border: none;
+  background: var(--color-white);
+  color: inherit;
+  text-align: left;
+  display: grid;
+  grid-gap: 0.25rem;
+  gap: 0.25rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+html[data-theme=dark] .prokodo-Autocomplete__item {
+  background: rgb(16, 19, 27);
+}
+.prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:focus-visible {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item--is-first {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Autocomplete__item--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+.prokodo-Autocomplete__itemLabel {
+  margin: 0;
+  color: var(--color-grey-900);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Autocomplete__itemDescription {
+  margin: 0;
+  color: var(--color-grey-700);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}