@prokodo/ui 0.0.45 → 0.0.46

package/dist/types/components/form/Form.model.d.ts

@@ -89,6 +89,7 @@ export type FormViewProps = FormProps & {
     formState: Omit<FormField, "onChange">[];
     formMessages?: FormMessages;
     honeypot: InputHTMLAttributes<HTMLInputElement>;
+    isHoneypotEmpty?: boolean;
     fieldProps?: FormFieldProps;
     onFormSubmit: (e: FormEvent<HTMLFormElement>) => void;
     isFormValid: boolean;

package/dist/ui.css

@@ -147,12 +147,12 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-@keyframes backgroundFill {
-  0% {
-    background-position: 0 0;
+@keyframes accordionBorderShift {
+  from {
+    background-position: 0 0, 0% 0;
   }
-  33%, 100% {
-    background-position: -100% 0;
+  to {
+    background-position: 0 0, 200% 0;
   }
 }
 .prokodo-Accordion {
@@ -179,24 +179,59 @@
   background-size: 200% 100%;
   background-image: linear-gradient(to left, var(--color-primary-500) 25%, var(--color-secondary-500) 50%, var(--color-white) 50%);
   transition: background-color 0.3s ease;
+  /* Reserve border space (no layout jump) */
+  border: 2px solid transparent;
+  border-radius: 12px;
+  /* Two-background trick: inner fill + border gradient */
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white))) padding-box, linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500)) border-box;
+  /* Hide the border layer initially */
+  background-size: 100% 100%, 0% 100%;
+  background-position: 0 0, 0 0;
+  background-repeat: no-repeat;
+  transition: color 0.3s ease, background-size 0.35s ease;
 }
 .prokodo-Accordion__header:hover, .prokodo-Accordion__header:focus-visible {
-  color: var(--color-grey-50) !important;
-  animation: backgroundFill 2s ease;
+  /* Reveal + animate ONLY the border layer */
+  background-size: 100% 100%, 200% 100%;
+  animation: accordionBorderShift 2s linear;
 }
 .prokodo-Accordion__header--is-expanded {
-  color: var(--color-grey-50) !important;
+  position: relative;
+  z-index: 2;
+  /* Keep border visible, stop the animation */
+  background-size: 100% 100%, 100% 100%;
+  background-position: 0 0, 100% 0;
+  border-radius: 12px 12px 0 0;
   animation: none !important;
-  background-image: var(--gradient-background-primary-secondary);
+  box-shadow: var(--elevation-1);
 }
 .prokodo-Accordion__title {
   width: calc(100% - 20px);
-  font-size: 16px;
-  font-weight: 500;
   margin: 0;
+  font-weight: 500 !important;
+  font-size: 1.125rem !important;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-style: normal !important;
+  line-height: 1.55 !important;
+  letter-spacing: 0.03em !important;
+  text-transform: none !important;
+  text-align: left !important;
+  text-decoration: none !important;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
 }
-.prokodo-Accordion__title--is-expanded {
-  color: var(--color-grey-50) !important;
+.prokodo-Accordion__title {
+  font-weight: 500;
 }
 .prokodo-Accordion__icon {
   padding-left: 1rem;
@@ -207,7 +242,6 @@
 }
 .prokodo-Accordion__content {
   padding: 16px;
-  border-top: 1px solid var(--color-grey-200);
   background-color: var(--color-white);
   transition: max-height 0.3s ease, opacity 0.3s ease;
   font-weight: 400;
@@ -4151,7 +4185,6 @@ html[data-theme=dark] .prokodo-Label__text {
   pointer-events: none;
   transition: opacity 0.3s ease, transform 0.3s ease;
   left: -99999px;
-  /* Full width modifier */
 }
 .prokodo-Dialog {
   position: fixed;
@@ -4190,11 +4223,13 @@ html[data-theme=dark] .prokodo-Label__text {
 
     $index: $index + 1;
   } */
-  /* Scroll behavior styles */
 }
 .prokodo-Dialog__container:focus-visible {
   outline: 0;
 }
+.prokodo-Dialog__container {
+  /* Scroll behavior styles */
+}
 .prokodo-Dialog__container--scroll-paper {
   height: 100%;
   max-height: calc(100vh - 3rem);
@@ -4317,6 +4352,9 @@ html[data-theme=dark] .prokodo-Label__text {
     transition: none;
   }
 }
+.prokodo-Dialog {
+  /* Full width modifier */
+}
 .prokodo-Dialog--fullScreen {
   max-width: none;
   width: 100%;
@@ -4823,7 +4861,9 @@ html[data-theme=dark] .prokodo-Label__text {
 .prokodo-DynamicList {
   border: none;
   padding: 0;
-  /* ───────────────── helper / error text */
+}
+.prokodo-DynamicList__label {
+  margin-bottom: 0.75rem;
 }
 .prokodo-DynamicList__list {
   display: flex;
@@ -4832,6 +4872,7 @@ html[data-theme=dark] .prokodo-Label__text {
   gap: 1rem;
   list-style-type: none;
   padding: 0;
+  margin-top: 0;
 }
 .prokodo-DynamicList__list__item {
   display: flex;
@@ -4851,6 +4892,9 @@ html[data-theme=dark] .prokodo-Label__text {
 .prokodo-DynamicList__delete__button--is-multi {
   margin-top: 0.5rem;
 }
+.prokodo-DynamicList {
+  /* ───────────────── helper / error text */
+}
 .prokodo-DynamicList__helperText {
   padding-left: 1.5rem;
   padding-top: 0.75rem;
@@ -5059,12 +5103,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
 }
 .prokodo-Select {
   position: relative;
-  /* ───────────────── field (container for button + listbox) */
-  /* ───────────────── toggle button */
-  /* ───────────────── listbox (popup) */
-  /* ───────────────── option item */
-  /* ───────────────── checkbox for multi-select */
-  /* ───────────────── helper / error text */
 }
 .prokodo-Select--fullWidth {
   width: 100%;
@@ -5083,6 +5121,9 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   pointer-events: none;
   background-color: var(--color-white);
 }
+.prokodo-Select {
+  /* ───────────────── field (container for button + listbox) */
+}
 .prokodo-Select__field {
   position: relative;
   box-shadow: var(--elevation-1);
@@ -5092,6 +5133,9 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
 .prokodo-Select__field--expanded {
   box-shadow: none;
 }
+.prokodo-Select {
+  /* ───────────────── toggle button */
+}
 .prokodo-Select__button {
   box-sizing: border-box;
   width: calc(100% - 0.25rem + 4px);
@@ -5108,10 +5152,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   -webkit-mask-composite: source-over;
           mask-composite: add;
   /* hover / focus */
-  /* open state — JS toggles .Select__button--expanded **and**
-     .Select__field--expanded plus aria-expanded="true"          */
-  /* caret / icon (if you still have one) */
-  /* inner text */
 }
 .prokodo-Select__button:hover {
   background: var(--gradient-border-4);
@@ -5128,6 +5168,10 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
 .prokodo-Select__button:disabled:hover {
   background: var(--gradient-border-8);
 }
+.prokodo-Select__button {
+  /* open state — JS toggles .Select__button--expanded **and**
+     .Select__field--expanded plus aria-expanded="true"          */
+}
 .prokodo-Select__button--expanded {
   border-top-left-radius: 1.6875rem;
   border-top-right-radius: 1.6875rem;
@@ -5141,6 +5185,9 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+.prokodo-Select__button {
+  /* caret / icon (if you still have one) */
+}
 .prokodo-Select__button > svg {
   position: absolute;
   top: 0;
@@ -5148,6 +5195,9 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   font-size: 1rem;
   height: 100%;
 }
+.prokodo-Select__button {
+  /* inner text */
+}
 .prokodo-Select__button__inner {
   display: flex;
   align-items: center;
@@ -5192,6 +5242,9 @@ html[data-theme=dark] .prokodo-Select__button__inner {
 .prokodo-Select__button__inner--is-placeholder--disabled {
   color: var(--color-grey-300);
 }
+.prokodo-Select {
+  /* ───────────────── listbox (popup) */
+}
 .prokodo-Select__listbox {
   position: absolute;
   box-sizing: border-box;
@@ -5216,6 +5269,9 @@ html[data-theme=dark] .prokodo-Select__button__inner {
 .prokodo-Select__listbox--is-closed {
   animation: fade-out 200ms ease-in forwards;
 }
+.prokodo-Select {
+  /* ───────────────── option item */
+}
 .prokodo-Select__item {
   list-style: none;
   display: flex;
@@ -5236,9 +5292,6 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   text-transform: none;
   text-align: left;
   text-decoration: none;
-  /* hover / focus */
-  /* selected */
-  /* disabled (if you add aria-disabled) */
 }
 @media screen and (min-width: 480px) {
   .prokodo-Select__item {
@@ -5256,6 +5309,9 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   border-bottom-left-radius: 1.5625rem;
   border-bottom-right-radius: 1.5625rem;
 }
+.prokodo-Select__item {
+  /* hover / focus */
+}
 .prokodo-Select__item:hover {
   background-color: var(--color-grey-50);
 }
@@ -5263,13 +5319,22 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   outline: 0;
   background: var(--color-primary-100);
 }
+.prokodo-Select__item {
+  /* selected */
+}
 .prokodo-Select__item--selected {
   background-color: var(--color-primary-50);
 }
+.prokodo-Select__item {
+  /* disabled (if you add aria-disabled) */
+}
 .prokodo-Select__item[aria-disabled=true] {
   color: var(--color-grey-400);
   cursor: not-allowed;
 }
+.prokodo-Select {
+  /* ───────────────── checkbox for multi-select */
+}
 .prokodo-Select__checkbox {
   width: 18px;
   height: 18px;
@@ -5305,6 +5370,9 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   -webkit-mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
   mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
 }
+.prokodo-Select {
+  /* ───────────────── helper / error text */
+}
 .prokodo-Select__helperText {
   padding-left: 1.5rem;
   padding-top: 0.75rem;
@@ -6413,7 +6481,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
  */
 .prokodo-GridRow {
   /* Grid alignment classes */
-  /* Define grid-column spans for different screen sizes */
 }
 .prokodo-GridRow--align-left {
   justify-items: start;
@@ -6424,6 +6491,9 @@ html[data-theme=dark] .prokodo-Select__helperText {
 .prokodo-GridRow--align-right {
   justify-items: end;
 }
+.prokodo-GridRow {
+  /* Define grid-column spans for different screen sizes */
+}
 .prokodo-GridRow--xs-1 {
   grid-column: span 1;
 }
@@ -6960,16 +7030,31 @@ html[data-theme=dark] .prokodo-Select__helperText {
   width: 100%;
   margin: 0.25rem 0;
   color: var(--color-grey-500);
-  font-weight: 400;
-  font-size: 1rem;
-  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-weight: 500;
+  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.4;
+  line-height: 1.55;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
   text-decoration: none;
 }
+@media screen and (min-width: 480px) {
+  .prokodo-List__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-List__item {
+  font-weight: 500;
+}
 .prokodo-List__item--has-icon {
   flex-wrap: nowrap;
 }
@@ -7038,16 +7123,31 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-List__item__title--card {
   display: block;
   padding: 0.75rem 0 0.25rem 0.5rem;
-  font-weight: 400;
-  font-size: 1rem;
-  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-weight: 500;
+  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.4;
+  line-height: 1.55;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
   text-decoration: none;
 }
+@media screen and (min-width: 480px) {
+  .prokodo-List__item__title--card {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item__title--card {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-List__item__title--card {
+  font-weight: 500;
+}
 .prokodo-List__item__content {
   width: calc(100% - 2rem);
 }
@@ -7094,16 +7194,31 @@ html[data-theme=dark] .prokodo-List__item__icon {
   color: var(--color-grey-500);
 }
 .prokodo-List__item--is-clickable a {
-  font-weight: 400;
-  font-size: 1rem;
-  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-weight: 500;
+  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.4;
+  line-height: 1.55;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
   text-decoration: none;
 }
+@media screen and (min-width: 480px) {
+  .prokodo-List__item--is-clickable a {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-List__item--is-clickable a {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-List__item--is-clickable a {
+  font-weight: 500;
+}
 .prokodo-List__item--is-clickable:hover span[role=presentation] {
   color: var(--color-primary-500);
 }
@@ -9618,8 +9733,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   background: var(--bg);
   box-shadow: var(--shadow);
   /* ───── collapsed → slide to the right leaving only the toggle visible */
-  /* toggle button (always visible!) ------------------------------------- */
-  /* list / items -------------------------------------------------------- */
 }
 .prokodo-SideNav--collapsed {
   width: 56px;
@@ -9655,6 +9768,9 @@ html[data-theme=dark] .prokodo-List__item__icon {
   height: 0;
   text-indent: -99999px;
 }
+.prokodo-SideNav {
+  /* toggle button (always visible!) ------------------------------------- */
+}
 .prokodo-SideNav__toggle {
   position: relative;
   display: flex;
@@ -9678,6 +9794,9 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-SideNav__toggle:hover {
   background: var(--color-grey-50);
 }
+.prokodo-SideNav {
+  /* list / items -------------------------------------------------------- */
+}
 .prokodo-SideNav__list {
   margin: 0;
   padding: 0;
@@ -9736,7 +9855,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-transform: none;
   text-align: left;
   text-decoration: none;
-  animation: label-in 150ms ease forwards;
 }
 @media screen and (min-width: 480px) {
   .prokodo-SideNav__label {
@@ -9750,6 +9868,9 @@ html[data-theme=dark] .prokodo-List__item__icon {
     line-height: 1.45;
   }
 }
+.prokodo-SideNav__label {
+  animation: label-in 150ms ease forwards;
+}
 .prokodo-SideNav__label--collapsed .prokodo-SideNav__label {
   animation: label-out 150ms ease forwards;
 }/* stylelint-disable */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prokodo/ui",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "type": "module",
   "description": "Modern, customizable UI components built with React and TypeScript — developed by prokodo for high-performance web interfaces.",
   "sideEffects": false,