@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/animated/Animated.client.js

@@ -7,7 +7,11 @@ import { isNumber } from "../../helpers/validations.js";
 import { AnimatedView } from "./Animated.view.js";
 function AnimatedClient(props) {
   const {
-    delay = 0,
+    /* istanbul ignore next */
+    delay = (
+      /* istanbul ignore next */
+      0
+    ),
     onAnimate,
     disabled,
     speed,
@@ -20,10 +24,14 @@ function AnimatedClient(props) {
   const timeoutRef = useRef(null);
   useEffect(() => {
     if (Boolean(disabled)) return;
-    timeoutRef.current = window.setTimeout(() => {
-      setVisible(true);
-      onAnimate == null ? void 0 : onAnimate(true);
-    }, delay);
+    timeoutRef.current = window.setTimeout(
+      /* istanbul ignore next */
+      () => {
+        setVisible(true);
+        onAnimate == null ? void 0 : onAnimate(true);
+      },
+      delay
+    );
     return () => {
       if (timeoutRef.current !== null && isNumber(timeoutRef.current)) {
         clearTimeout(timeoutRef.current);

package/dist/components/animated/Animated.js

@@ -5,8 +5,14 @@ import AnimatedServer from "./Animated.server.js";
 const Animated = createIsland({
   name: "Animated",
   Server: AnimatedServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Animated.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Animated.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   Animated

package/dist/components/animatedText/AnimatedText.client.js

@@ -5,8 +5,16 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { AnimatedTextView } from "./AnimatedText.view.js";
 function AnimatedTextClient({
-  speed = 30,
-  delay = 0,
+  /* istanbul ignore next */
+  speed = (
+    /* istanbul ignore next */
+    30
+  ),
+  /* istanbul ignore next */
+  delay = (
+    /* istanbul ignore next */
+    0
+  ),
   disabled,
   children,
   ...rest

package/dist/components/animatedText/AnimatedText.js

@@ -5,8 +5,14 @@ import AnimatedTextServer from "./AnimatedText.server.js";
 const AnimatedText = createIsland({
   name: "AnimatedText",
   Server: AnimatedTextServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./AnimatedText.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name((p) => !Boolean(p.disabled), "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./AnimatedText.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name((p) => !Boolean(p.disabled), "isInteractive")
+  )
 });
 export {
   AnimatedText

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

@@ -32,7 +32,11 @@ function AutocompleteClient({
     window.addEventListener("mousedown", onClickOutside);
     return () => window.removeEventListener("mousedown", onClickOutside);
   }, [open]);
-  const list = useMemo(() => items ?? [], [items]);
+  const list = useMemo(
+    /* istanbul ignore next */
+    () => items ?? [],
+    [items]
+  );
   const updateListAnchor = useCallback(() => {
     const root = rootRef.current;
     if (!root) return;

package/dist/components/autocomplete/Autocomplete.css

@@ -124,69 +124,115 @@
  * 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;
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Autocomplete--primary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-brand);
+  --pk-autocomplete-gradient-to: var(--pk-color-accent);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-brand) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--secondary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-accent);
+  --pk-autocomplete-gradient-to: var(--pk-color-brand);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-accent) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--success {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-success);
+  --pk-autocomplete-gradient-to: #10CCB8;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-success) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--warning {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-warning);
+  --pk-autocomplete-gradient-to: #f7cc6a;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--error {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-error);
+  --pk-autocomplete-gradient-to: #ff6b6b;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-error) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--info, .prokodo-Autocomplete--inherit, .prokodo-Autocomplete--white {
+  --pk-autocomplete-shadow-color-focus: rgba(0, 0, 0, 0.1);
+  --pk-autocomplete-gradient-from: var(--pk-color-muted);
+  --pk-autocomplete-gradient-to: var(--pk-color-border);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-autocomplete-bg));
+}
+html[data-theme="dark"] .prokodo-Autocomplete, [data-theme="dark"] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
+  --pk-autocomplete-state-fg: var(--pk-color-fg);
+  --pk-autocomplete-fg-muted: var(--pk-palette-grey-200);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 15%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 25%, var(--pk-autocomplete-bg));
 }
 .prokodo-Autocomplete__inputWrap {
   position: relative;
-  z-index: 41;
-  border-radius: 1.5rem;
 }
-.prokodo-Autocomplete__input {
-  width: 100%;
+.prokodo-Autocomplete__input--is-open {
+  --pk-input-shadow-color-focus: var(--pk-autocomplete-shadow-color-focus);
+}
+.prokodo-Autocomplete__input--is-open .prokodo-Input__field {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
 }
-.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--is-open .prokodo-Input__notch {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+  border-bottom-color: transparent;
 }
 .prokodo-Autocomplete__input__inner--is-open {
-  background: var(--gradient-border-4);
+  background-size: 100% 100%, 100% 100%;
+  background-position: 100% 0, 0 0;
+  animation: none;
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node {
+  background-color: var(--pk-autocomplete-bg);
+  color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node--is-open {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node:-webkit-autofill, .prokodo-Autocomplete__input__node:-webkit-autofill:hover, .prokodo-Autocomplete__input__node:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--pk-autocomplete-bg) inset;
+  -webkit-text-fill-color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node:disabled {
+  color: var(--pk-autocomplete-fg-muted);
 }
 .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);
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(var(--pk-autocomplete-bg), var(--pk-autocomplete-bg)) padding-box, linear-gradient(90deg, var(--pk-autocomplete-gradient-from), var(--pk-autocomplete-gradient-to), var(--pk-autocomplete-gradient-from)) border-box;
+  border: 2px solid transparent;
+  border-top: none;
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
+  box-shadow: 0 8px 16px var(--pk-autocomplete-shadow-color-focus), 0 2px 6px color-mix(in srgb, var(--pk-autocomplete-shadow-color-focus) 80%, transparent);
+  z-index: 200;
+  overflow-y: auto;
   max-height: 260px;
-  overflow: auto;
-  z-index: 50;
-  animation: fade-in 180ms ease-out;
-  scrollbar-width: none;
-}
-.prokodo-Autocomplete__list::-webkit-scrollbar {
-  display: none;
+  padding: var(--pk-space-xs) 0;
+  list-style: none;
+  margin: 0;
 }
 .prokodo-Autocomplete__state {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  color: var(--pk-autocomplete-state-fg);
   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;
@@ -209,70 +255,42 @@
     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 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   width: 100%;
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  cursor: pointer;
+  background: none;
   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);
+  color: var(--pk-autocomplete-fg);
+  transition: background-color var(--pk-timing-fast) ease;
 }
 .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
+  background-color: var(--pk-autocomplete-item-hover-bg);
 }
-.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-active {
+  background-color: var(--pk-autocomplete-item-active-bg);
 }
 .prokodo-Autocomplete__item--is-first {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-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);
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
 }
 .prokodo-Autocomplete__itemLabel {
   margin: 0;
-  color: var(--color-grey-900);
+  color: var(--pk-autocomplete-fg);
   font-weight: 400;
-  font-size: 1rem;
+  font-size: 1.125rem;
   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;
+  line-height: 1.55;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
@@ -280,19 +298,17 @@ html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
 }
 @media screen and (min-width: 480px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 @media screen and (min-width: 960px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 .prokodo-Autocomplete__itemDescription {
-  margin: 0;
-  color: var(--color-grey-700);
+  margin: var(--pk-space-xs) 0 0;
+  color: var(--pk-autocomplete-fg-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/autocomplete/Autocomplete.js

@@ -5,7 +5,10 @@ import AutocompleteServer from "./Autocomplete.server.js";
 const Autocomplete = createIsland({
   name: "Autocomplete",
   Server: AutocompleteServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Autocomplete.lazy.js"), "loadLazy")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Autocomplete.lazy.js"), "loadLazy")
+  )
 });
 export {
   Autocomplete

package/dist/components/autocomplete/Autocomplete.module.css

@@ -124,69 +124,115 @@
  * 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;
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Autocomplete--primary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-brand);
+  --pk-autocomplete-gradient-to: var(--pk-color-accent);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-brand) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--secondary {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-accent);
+  --pk-autocomplete-gradient-to: var(--pk-color-brand);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-accent) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--success {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-success);
+  --pk-autocomplete-gradient-to: #10CCB8;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-success) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--warning {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-warning);
+  --pk-autocomplete-gradient-to: #f7cc6a;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--error {
+  --pk-autocomplete-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-autocomplete-gradient-from: var(--pk-color-error);
+  --pk-autocomplete-gradient-to: #ff6b6b;
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-error) 18%, var(--pk-autocomplete-bg));
+}
+.prokodo-Autocomplete--info, .prokodo-Autocomplete--inherit, .prokodo-Autocomplete--white {
+  --pk-autocomplete-shadow-color-focus: rgba(0, 0, 0, 0.1);
+  --pk-autocomplete-gradient-from: var(--pk-color-muted);
+  --pk-autocomplete-gradient-to: var(--pk-color-border);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-autocomplete-bg));
+}
+html[data-theme="dark"] .prokodo-Autocomplete, [data-theme="dark"] .prokodo-Autocomplete, .pk-theme-dark .prokodo-Autocomplete {
+  --pk-autocomplete-state-fg: var(--pk-color-fg);
+  --pk-autocomplete-fg-muted: var(--pk-palette-grey-200);
+  --pk-autocomplete-item-hover-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 15%, var(--pk-autocomplete-bg));
+  --pk-autocomplete-item-active-bg: color-mix(in srgb, var(--pk-autocomplete-gradient-from) 25%, var(--pk-autocomplete-bg));
 }
 .prokodo-Autocomplete__inputWrap {
   position: relative;
-  z-index: 41;
-  border-radius: 1.5rem;
 }
-.prokodo-Autocomplete__input {
-  width: 100%;
+.prokodo-Autocomplete__input--is-open {
+  --pk-input-shadow-color-focus: var(--pk-autocomplete-shadow-color-focus);
+}
+.prokodo-Autocomplete__input--is-open .prokodo-Input__field {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
 }
-.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--is-open .prokodo-Input__notch {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+  border-bottom-color: transparent;
 }
 .prokodo-Autocomplete__input__inner--is-open {
-  background: var(--gradient-border-4);
+  background-size: 100% 100%, 100% 100%;
+  background-position: 100% 0, 0 0;
+  animation: none;
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node {
+  background-color: var(--pk-autocomplete-bg);
+  color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node--is-open {
+  border-radius: var(--pk-autocomplete-radius) var(--pk-autocomplete-radius) 0 0;
+}
+.prokodo-Autocomplete__input__node:-webkit-autofill, .prokodo-Autocomplete__input__node:-webkit-autofill:hover, .prokodo-Autocomplete__input__node:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--pk-autocomplete-bg) inset;
+  -webkit-text-fill-color: var(--pk-autocomplete-fg);
+}
+.prokodo-Autocomplete__input__node:disabled {
+  color: var(--pk-autocomplete-fg-muted);
 }
 .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);
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(var(--pk-autocomplete-bg), var(--pk-autocomplete-bg)) padding-box, linear-gradient(90deg, var(--pk-autocomplete-gradient-from), var(--pk-autocomplete-gradient-to), var(--pk-autocomplete-gradient-from)) border-box;
+  border: 2px solid transparent;
+  border-top: none;
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
+  box-shadow: 0 8px 16px var(--pk-autocomplete-shadow-color-focus), 0 2px 6px color-mix(in srgb, var(--pk-autocomplete-shadow-color-focus) 80%, transparent);
+  z-index: 200;
+  overflow-y: auto;
   max-height: 260px;
-  overflow: auto;
-  z-index: 50;
-  animation: fade-in 180ms ease-out;
-  scrollbar-width: none;
-}
-.prokodo-Autocomplete__list::-webkit-scrollbar {
-  display: none;
+  padding: var(--pk-space-xs) 0;
+  list-style: none;
+  margin: 0;
 }
 .prokodo-Autocomplete__state {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  color: var(--pk-autocomplete-state-fg);
   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;
@@ -209,70 +255,42 @@
     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 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   width: 100%;
+  padding: var(--pk-autocomplete-padding-y) var(--pk-autocomplete-padding-x);
+  cursor: pointer;
+  background: none;
   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);
+  color: var(--pk-autocomplete-fg);
+  transition: background-color var(--pk-timing-fast) ease;
 }
 .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Autocomplete__item:hover {
-  background: var(--color-primary-50);
+  background-color: var(--pk-autocomplete-item-hover-bg);
 }
-.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-active {
+  background-color: var(--pk-autocomplete-item-active-bg);
 }
 .prokodo-Autocomplete__item--is-first {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-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);
+  border-radius: 0 0 var(--pk-autocomplete-radius) var(--pk-autocomplete-radius);
 }
 .prokodo-Autocomplete__itemLabel {
   margin: 0;
-  color: var(--color-grey-900);
+  color: var(--pk-autocomplete-fg);
   font-weight: 400;
-  font-size: 1rem;
+  font-size: 1.125rem;
   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;
+  line-height: 1.55;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
@@ -280,19 +298,17 @@ html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
 }
 @media screen and (min-width: 480px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 @media screen and (min-width: 960px) {
   .prokodo-Autocomplete__itemLabel {
-    font-size: 0.875rem;
-    line-height: 1.4;
+    font-size: 1rem;
   }
 }
 .prokodo-Autocomplete__itemDescription {
-  margin: 0;
-  color: var(--color-grey-700);
+  margin: var(--pk-space-xs) 0 0;
+  color: var(--pk-autocomplete-fg-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;