@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/drawer/Drawer.css

@@ -133,11 +133,11 @@
 .prokodo-Drawer__backdrop {
   position: fixed;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--pk-drawer-backdrop-bg);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
-  z-index: 1301;
+  z-index: calc(var(--pk-drawer-z-index) - 1);
 }
 .prokodo-Drawer__backdrop--open {
   opacity: 1;
@@ -150,9 +150,9 @@
 }
 .prokodo-Drawer__container {
   position: fixed;
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-1);
-  z-index: 1302;
+  background-color: var(--pk-drawer-bg);
+  box-shadow: var(--pk-drawer-shadow);
+  z-index: var(--pk-drawer-z-index);
   pointer-events: none;
   width: 300px;
   height: 100%;
@@ -229,11 +229,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-grey-200);
+  padding: var(--pk-drawer-padding);
+  border-bottom: 1px solid var(--pk-drawer-border);
 }
 .prokodo-Drawer__content {
-  padding: 1rem;
+  padding: var(--pk-drawer-padding);
   max-height: calc(100% - 7rem);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;

package/dist/components/drawer/Drawer.js

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

package/dist/components/drawer/Drawer.module.css

@@ -133,11 +133,11 @@
 .prokodo-Drawer__backdrop {
   position: fixed;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--pk-drawer-backdrop-bg);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
-  z-index: 1301;
+  z-index: calc(var(--pk-drawer-z-index) - 1);
 }
 .prokodo-Drawer__backdrop--open {
   opacity: 1;
@@ -150,9 +150,9 @@
 }
 .prokodo-Drawer__container {
   position: fixed;
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-1);
-  z-index: 1302;
+  background-color: var(--pk-drawer-bg);
+  box-shadow: var(--pk-drawer-shadow);
+  z-index: var(--pk-drawer-z-index);
   pointer-events: none;
   width: 300px;
   height: 100%;
@@ -229,11 +229,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-grey-200);
+  padding: var(--pk-drawer-padding);
+  border-bottom: 1px solid var(--pk-drawer-border);
 }
 .prokodo-Drawer__content {
-  padding: 1rem;
+  padding: var(--pk-drawer-padding);
   max-height: calc(100% - 7rem);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;

package/dist/components/drawer/Drawer.view.js

@@ -30,7 +30,10 @@ const DrawerView = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "aria-hidden": isOpen ? void 0 : true,
+      "aria-hidden": isOpen ? void 0 : (
+        /* istanbul ignore next */
+        true
+      ),
       className: bem("backdrop", { open: isOpen }),
       ...backdropProps,
       children: [
@@ -50,8 +53,13 @@ const DrawerView = /* @__PURE__ */ __name(({
             ref: containerRef,
             "aria-labelledby": isString(title) ? "drawer-title" : void 0,
             role: "dialog",
+            /* istanbul ignore next */
+            /* istanbul ignore next */
             ...isOpen ? { "aria-modal": "true" } : { "aria-hidden": "true", inert: true },
-            "aria-modal": isOpen ? "true" : void 0,
+            "aria-modal": isOpen ? "true" : (
+              /* istanbul ignore next */
+              void 0
+            ),
             className: bem(
               "container",
               {
@@ -74,7 +82,10 @@ const DrawerView = /* @__PURE__ */ __name(({
                     variant: "text",
                     ...closeButtonProps,
                     ref: closeButtonRef,
-                    onClick: /* @__PURE__ */ __name(() => onClose == null ? void 0 : onClose("escapeKeyDown"), "onClick")
+                    onClick: (
+                      /* istanbul ignore next */
+                      /* @__PURE__ */ __name(() => onClose == null ? void 0 : onClose("escapeKeyDown"), "onClick")
+                    )
                   }
                 )
               ] }),

package/dist/components/dynamic-list/DynamicList.client.js

@@ -87,6 +87,7 @@ function DynamicListClient({
     [items, onChange, buttonDeleteProps]
   );
   const formatedFields = useMemo(
+    /* istanbul ignore next */
     () => (fields ?? []).map((f) => {
       if (f.fieldType === "select") {
         const { ...rest2 } = f;

package/dist/components/dynamic-list/DynamicList.css

@@ -131,41 +131,49 @@
   /* ───────────────── helper / error text */
 }
 .prokodo-DynamicList__label {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--pk-dynamic-list-label-mb);
 }
 .prokodo-DynamicList__list {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--pk-dynamic-list-gap);
   list-style-type: none;
   padding: 0;
   margin-top: 0;
 }
 .prokodo-DynamicList__list__item {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  flex-direction: column;
+  gap: var(--pk-space-sm);
   width: 100%;
 }
 .prokodo-DynamicList__list__item--is-multi {
+  flex-direction: column;
   align-items: flex-start;
+  width: auto;
+}
+.prokodo-DynamicList__field {
+  flex: 1 1;
+  min-width: 0;
 }
 .prokodo-DynamicList__field--is-multi {
-  margin-bottom: 1rem;
+  margin-bottom: var(--pk-dynamic-list-field-mb);
 }
 .prokodo-DynamicList__field--is-multi:last-of-type {
   margin-bottom: 0;
 }
 .prokodo-DynamicList__delete__button--is-multi {
-  margin-top: 0.5rem;
+  margin-top: var(--pk-dynamic-list-delete-mt);
+  align-self: flex-start;
 }
 .prokodo-DynamicList__helperText {
-  padding-left: 1.5rem;
-  padding-top: 0.75rem;
+  padding-left: var(--pk-dynamic-list-helper-pl);
+  padding-top: var(--pk-dynamic-list-helper-pt);
   display: flex;
-  color: var(--color-grey-300);
-  width: 80%;
+  color: var(--pk-dynamic-list-helper-fg);
+  width: var(--pk-dynamic-list-helper-w);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -188,12 +196,12 @@
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-DynamicList__helperText {
-  color: var(--color-grey-700);
+[data-theme="dark"] .prokodo-DynamicList__helperText, .pk-theme-dark .prokodo-DynamicList__helperText {
+  color: var(--pk-palette-grey-400);
 }
 .prokodo-DynamicList__helperText__content {
   width: 100%;
 }
 .prokodo-DynamicList__helperText__content--is-error {
-  color: var(--color-error);
+  color: var(--pk-dynamic-list-error-fg);
 }

package/dist/components/dynamic-list/DynamicList.js

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

package/dist/components/dynamic-list/DynamicList.module.css

@@ -131,41 +131,49 @@
   /* ───────────────── helper / error text */
 }
 .prokodo-DynamicList__label {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--pk-dynamic-list-label-mb);
 }
 .prokodo-DynamicList__list {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--pk-dynamic-list-gap);
   list-style-type: none;
   padding: 0;
   margin-top: 0;
 }
 .prokodo-DynamicList__list__item {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  flex-direction: column;
+  gap: var(--pk-space-sm);
   width: 100%;
 }
 .prokodo-DynamicList__list__item--is-multi {
+  flex-direction: column;
   align-items: flex-start;
+  width: auto;
+}
+.prokodo-DynamicList__field {
+  flex: 1 1;
+  min-width: 0;
 }
 .prokodo-DynamicList__field--is-multi {
-  margin-bottom: 1rem;
+  margin-bottom: var(--pk-dynamic-list-field-mb);
 }
 .prokodo-DynamicList__field--is-multi:last-of-type {
   margin-bottom: 0;
 }
 .prokodo-DynamicList__delete__button--is-multi {
-  margin-top: 0.5rem;
+  margin-top: var(--pk-dynamic-list-delete-mt);
+  align-self: flex-start;
 }
 .prokodo-DynamicList__helperText {
-  padding-left: 1.5rem;
-  padding-top: 0.75rem;
+  padding-left: var(--pk-dynamic-list-helper-pl);
+  padding-top: var(--pk-dynamic-list-helper-pt);
   display: flex;
-  color: var(--color-grey-300);
-  width: 80%;
+  color: var(--pk-dynamic-list-helper-fg);
+  width: var(--pk-dynamic-list-helper-w);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -188,12 +196,12 @@
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-DynamicList__helperText {
-  color: var(--color-grey-700);
+[data-theme="dark"] .prokodo-DynamicList__helperText, .pk-theme-dark .prokodo-DynamicList__helperText {
+  color: var(--pk-palette-grey-400);
 }
 .prokodo-DynamicList__helperText__content {
   width: 100%;
 }
 .prokodo-DynamicList__helperText__content--is-error {
-  color: var(--color-error);
+  color: var(--pk-dynamic-list-error-fg);
 }

package/dist/components/dynamic-list/DynamicList.module.scss.js

@@ -4,6 +4,7 @@ const styles = {
   "prokodo-DynamicList__list": "prokodo-DynamicList__list",
   "prokodo-DynamicList__list__item": "prokodo-DynamicList__list__item",
   "prokodo-DynamicList__list__item--is-multi": "prokodo-DynamicList__list__item--is-multi",
+  "prokodo-DynamicList__field": "prokodo-DynamicList__field",
   "prokodo-DynamicList__field--is-multi": "prokodo-DynamicList__field--is-multi",
   "prokodo-DynamicList__delete__button--is-multi": "prokodo-DynamicList__delete__button--is-multi",
   "prokodo-DynamicList__helperText": "prokodo-DynamicList__helperText",

package/dist/components/dynamic-list/DynamicList.view.js

@@ -18,12 +18,21 @@ function DynamicListView({
   className,
   classNameList,
   fields,
-  value = [],
+  /* istanbul ignore next */
+  value = (
+    /* istanbul ignore next */
+    []
+  ),
   buttonAddProps,
   buttonDeleteProps,
-  name = "items",
+  /* istanbul ignore next */
+  name = (
+    /* istanbul ignore next */
+    "items"
+  ),
   errorText,
-  helperText
+  helperText,
+  color
 }) {
   const isError = Boolean(errorText);
   const hasHelper = Boolean(helperText);
@@ -36,7 +45,11 @@ function DynamicListView({
     {
       "aria-describedby": isError ? errorId : helperId,
       "aria-labelledby": `${name}-legend`,
-      className: bem(void 0, void 0, className),
+      className: bem(
+        void 0,
+        color ? { [color]: true } : void 0,
+        className
+      ),
       children: [
         isString(label) && /* @__PURE__ */ jsx(
           Label,
@@ -44,6 +57,7 @@ function DynamicListView({
             ...labelProps,
             "aria-disabled": disabled,
             className: bem("label", void 0, labelProps == null ? void 0 : labelProps.className),
+            color,
             error: isError,
             id: (labelProps == null ? void 0 : labelProps.id) ?? `${name}-legend`,
             label,
@@ -57,45 +71,71 @@ function DynamicListView({
             "aria-describedby": errorId ?? helperId,
             className: bem("list", mod, classNameList),
             children: [
-              /* @__PURE__ */ jsx("li", { className: bem("list__item"), children: fields.map(({ fieldType, ...field }) => {
-                switch (fieldType) {
-                  case "select":
-                    return /* @__PURE__ */ jsx(
-                      Select,
-                      {
-                        fullWidth: true,
-                        ...field,
-                        className: bem("field", mod, field == null ? void 0 : field.className),
-                        "data-field": field == null ? void 0 : field.name,
-                        "data-index": idx,
-                        disabled: disabled ?? (field == null ? void 0 : field.disabled),
-                        id: `${name}-${idx}-${field.name}`,
-                        required: required ?? (field == null ? void 0 : field.required),
-                        name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`,
-                        value: single ? item : item[(field == null ? void 0 : field.name) ?? ""]
-                      },
-                      field.name
-                    );
-                  default:
-                    return /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        fullWidth: true,
-                        ...field,
-                        className: bem("field", mod, field == null ? void 0 : field.className),
-                        "data-field": field == null ? void 0 : field.name,
-                        "data-index": idx,
-                        disabled: disabled ?? (field == null ? void 0 : field.disabled),
-                        id: `${name}-${idx}-${field.name}`,
-                        required: required ?? (field == null ? void 0 : field.required),
-                        value: single ? item : item[(field == null ? void 0 : field.name) ?? ""],
-                        name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`
-                      },
-                      field.name
-                    );
-                }
-              }) }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs("li", { className: bem("list__item", mod), children: [
+                fields.map(({ fieldType, ...field }) => {
+                  switch (fieldType) {
+                    case "select":
+                      return /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          fullWidth: true,
+                          color,
+                          ...field,
+                          className: bem("field", mod, field == null ? void 0 : field.className),
+                          "data-field": field == null ? void 0 : field.name,
+                          "data-index": idx,
+                          disabled: disabled ?? (field == null ? void 0 : field.disabled),
+                          id: `${name}-${idx}-${field.name}`,
+                          required: required ?? (field == null ? void 0 : field.required),
+                          name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`,
+                          value: single ? item : (
+                            /* istanbul ignore next */
+                            item[(field == null ? void 0 : field.name) ?? /* istanbul ignore next */
+                            ""]
+                          )
+                        },
+                        field.name
+                      );
+                    default:
+                      return /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          fullWidth: true,
+                          color,
+                          ...field,
+                          className: bem("field", mod, field == null ? void 0 : field.className),
+                          "data-field": field == null ? void 0 : field.name,
+                          "data-index": idx,
+                          disabled: disabled ?? (field == null ? void 0 : field.disabled),
+                          id: `${name}-${idx}-${field.name}`,
+                          required: required ?? (field == null ? void 0 : field.required),
+                          name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`,
+                          value: single ? item : item[(field == null ? void 0 : field.name) ?? /* istanbul ignore next */
+                          ""]
+                        },
+                        field.name
+                      );
+                  }
+                }),
+                single && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": `Remove ${label} entry ${idx + 1}`,
+                    color: "error",
+                    "data-index": idx,
+                    iconProps: {
+                      name: "Delete02Icon"
+                    },
+                    ...buttonDeleteProps,
+                    className: bem(
+                      "delete__button",
+                      mod,
+                      buttonDeleteProps == null ? void 0 : buttonDeleteProps.className
+                    )
+                  }
+                )
+              ] }),
+              !single && /* @__PURE__ */ jsx(
                 Button,
                 {
                   "aria-label": `Remove ${label} entry ${idx + 1}`,
@@ -105,7 +145,11 @@ function DynamicListView({
                     name: "Delete02Icon"
                   },
                   ...buttonDeleteProps,
-                  className: bem("delete__button", mod, buttonDeleteProps == null ? void 0 : buttonDeleteProps.className)
+                  className: bem(
+                    "delete__button",
+                    mod,
+                    buttonDeleteProps == null ? void 0 : buttonDeleteProps.className
+                  )
                 }
               )
             ]
@@ -115,6 +159,7 @@ function DynamicListView({
         /* @__PURE__ */ jsx(
           Button,
           {
+            color: color !== "white" ? color : void 0,
             title: "Add item",
             variant: "outlined",
             ...buttonAddProps,

package/dist/components/form/Form.client.js

@@ -194,7 +194,10 @@ const FormClient = memo((props) => {
       const emptyArray = Array.isArray(field.value) && field.value.length === 0;
       const emptyScalar = field.value === void 0 || field.value === "";
       if (Boolean(field.required) && visible && (emptyScalar || emptyArray)) {
-        const errMsg = ((_b = (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input) == null ? void 0 : _b["required"]) ?? "This field is required";
+        const errMsg = (
+          /* istanbul ignore next */
+          ((_b = (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input) == null ? void 0 : _b["required"]) ?? "This field is required"
+        );
         const key = field.name ?? field.label ?? "";
         if (!errors[key]) {
           errors[key] = [];

package/dist/components/form/Form.js

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

package/dist/components/form/Form.view.js

@@ -13,7 +13,7 @@ import { Headline } from "../headline/Headline.js";
 const bem = create(styles, "Form");
 const FormView = /* @__PURE__ */ __name(({
   id,
-  variant = "primary",
+  color = "primary",
   disabled,
   action,
   label,
@@ -77,9 +77,9 @@ const FormView = /* @__PURE__ */ __name(({
             {
               ...field,
               key: field.name,
+              color,
               disabled: disabled !== void 0 ? disabled : field == null ? void 0 : field.disabled,
               messagesFields,
-              variant,
               ...fieldProps
             }
           )),
@@ -91,10 +91,12 @@ const FormView = /* @__PURE__ */ __name(({
               className: bem("hp"),
               id: "hp",
               name: "hp",
+              tabIndex: -1,
               type: "text",
               ...honeypotRest,
               readOnly: honeypotReadOnly,
-              value: hpValue
+              value: hpValue,
+              onChange: hpOnChange
             }
           )
         ] }),
@@ -108,7 +110,7 @@ const FormView = /* @__PURE__ */ __name(({
               type: "submit",
               ...button,
               className: bem("footer__submit", void 0, button == null ? void 0 : button.className),
-              color: (button == null ? void 0 : button.color) ?? variant,
+              color: (button == null ? void 0 : button.color) ?? color,
               disabled: !isFormValid
             }
           )