@prokodo/ui 0.1.15 → 1.0.1

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.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

@@ -31,7 +31,8 @@ function DynamicListView({
     "items"
   ),
   errorText,
-  helperText
+  helperText,
+  color
 }) {
   const isError = Boolean(errorText);
   const hasHelper = Boolean(helperText);
@@ -44,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,
@@ -52,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,
@@ -65,50 +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 : (
-                          /* istanbul ignore next */
-                          item[(field == null ? void 0 : field.name) ?? /* istanbul ignore next */
+              /* @__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
-                    );
-                  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),
-                        name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`,
-                        value: single ? item : item[(field == null ? void 0 : field.name) ?? /* istanbul ignore next */
-                        ""]
-                      },
-                      field.name
-                    );
-                }
-              }) }),
-              /* @__PURE__ */ jsx(
+                        },
+                        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}`,
@@ -118,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
+                  )
                 }
               )
             ]
@@ -128,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.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
             }
           )),
@@ -110,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
             }
           )

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

@@ -5,9 +5,12 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { create } from "../../helpers/bem.js";
 import styles from "./Form.module.scss.js";
+import { Autocomplete } from "../autocomplete/Autocomplete.js";
+import { CheckboxGroup } from "../checkbox-group/CheckboxGroup.js";
 import { Rating } from "../rating/Rating.js";
 import { DynamicList } from "../dynamic-list/DynamicList.js";
 import { GridRow } from "../grid/GridRow.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
 import { DatePicker } from "../datePicker/DatePicker.js";
 import { Input } from "../input/Input.js";
 import { Select } from "../select/Select.js";
@@ -17,7 +20,7 @@ const bem = create(styles, "FormField");
 function FormFieldClient({
   fieldType,
   visible,
-  variant,
+  color,
   messagesFields,
   onChange,
   onValidate,
@@ -36,7 +39,7 @@ function FormFieldClient({
           Switch,
           {
             priority: true,
-            color: variant,
+            color,
             ...props,
             checked: typeof (props == null ? void 0 : props.value) === "boolean" ? Boolean(props == null ? void 0 : props.value) : props.checked,
             onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
@@ -49,6 +52,7 @@ function FormFieldClient({
           Slider,
           {
             priority: true,
+            color,
             ...props,
             onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value == null ? void 0 : value.toString()), "onChange")
           }
@@ -60,6 +64,7 @@ function FormFieldClient({
           Select,
           {
             priority: true,
+            color,
             ...props,
             onChange: (
               /* istanbul ignore next */
@@ -74,6 +79,7 @@ function FormFieldClient({
           Input,
           {
             priority: true,
+            color,
             errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((e) => onChange == null ? void 0 : onChange(props, e.target.value), "onChange"),
@@ -87,6 +93,7 @@ function FormFieldClient({
           DatePicker,
           {
             priority: true,
+            color,
             ...props,
             translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
@@ -107,6 +114,7 @@ function FormFieldClient({
           DynamicList,
           {
             priority: true,
+            color,
             ...p,
             value: p == null ? void 0 : p.value,
             fields: (_c = p == null ? void 0 : p.fields) == null ? void 0 : _c.map((field) => ({
@@ -123,6 +131,7 @@ function FormFieldClient({
           Rating,
           {
             priority: true,
+            color,
             ...props,
             errorTranslations: (_d = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _d.input,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
@@ -133,6 +142,46 @@ function FormFieldClient({
           }
         )
       );
+    case "checkbox":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            priority: true,
+            color,
+            ...props,
+            checked: typeof (props == null ? void 0 : props.value) === "boolean" ? Boolean(props == null ? void 0 : props.value) : props.checked,
+            onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
+          }
+        )
+      );
+    case "checkbox-group":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          CheckboxGroup,
+          {
+            priority: true,
+            color,
+            ...props,
+            values: Array.isArray(props == null ? void 0 : props.value) ? props.value : props.values,
+            onChange: /* @__PURE__ */ __name((next) => onChange == null ? void 0 : onChange(props, next), "onChange")
+          }
+        )
+      );
+    case "autocomplete":
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            priority: true,
+            color,
+            ...props,
+            value: typeof (props == null ? void 0 : props.value) === "string" ? props.value : props.value,
+            onChange: /* @__PURE__ */ __name(({ query }) => onChange == null ? void 0 : onChange(props, query), "onChange"),
+            onSelect: /* @__PURE__ */ __name((item) => onChange == null ? void 0 : onChange(props, item.value), "onSelect")
+          }
+        )
+      );
     default:
       return null;
   }

package/dist/components/form/FormField.server.js

@@ -13,7 +13,7 @@ const bem = create(styles, "FormField");
 function FormFieldServer({
   fieldType,
   visible,
-  variant,
+  color,
   messagesFields,
   ...props
 }) {
@@ -25,18 +25,23 @@ function FormFieldServer({
   switch (fieldType) {
     case "switch":
       return renderFieldContainer(
-        /* @__PURE__ */ jsx(Switch, { color: variant, ...props })
+        /* @__PURE__ */ jsx(Switch, { color, ...props })
       );
     case "slider":
-      return renderFieldContainer(/* @__PURE__ */ jsx(Slider, { ...props }));
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(Slider, { color, ...props })
+      );
     case "select":
-      return renderFieldContainer(/* @__PURE__ */ jsx(Select, { ...props }));
+      return renderFieldContainer(
+        /* @__PURE__ */ jsx(Select, { color, ...props })
+      );
     case "input":
       return renderFieldContainer(
         /* @__PURE__ */ jsx(
           Input,
           {
             readOnly: true,
+            color,
             errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
             ...props
           }
@@ -48,6 +53,7 @@ function FormFieldServer({
           DatePicker,
           {
             readOnly: true,
+            color,
             ...props,
             translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date
           }

package/dist/components/form/FormResponse.js

@@ -34,9 +34,9 @@ const FormResponse = /* @__PURE__ */ __name(({
         "aria-relevant": "all",
         className: bem("errors"),
         classNameDesc: bem("errors__desc"),
+        color: "error",
         items: listItems,
-        role: "alert",
-        variant: "error"
+        role: "alert"
       }
     )
   ] });

package/dist/components/grid/Grid.css

@@ -127,7 +127,7 @@
 .prokodo-Grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  padding: 1rem;
+  padding: var(--pk-grid-padding);
 }
 
 .prokodo-GridRow {

package/dist/components/grid/Grid.module.css

@@ -127,7 +127,7 @@
 .prokodo-Grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  padding: 1rem;
+  padding: var(--pk-grid-padding);
 }
 
 .prokodo-GridRow {

package/dist/components/headline/Headline.css

@@ -127,43 +127,37 @@
  */
 .prokodo-Headline {
   margin: 0;
-  /* Basale Farb-Varianten (ohne Gradients) */
-  /* Highlight-Grundlage */
+  /* Color variants (mapped to semantic design tokens) */
   /* Varianten mit Highlight (mit Gradients/Shadow) */
   /* Größen */
   /* Alignment */
 }
 .prokodo-Headline--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-Headline--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Headline--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Headline--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Headline--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
 }
 .prokodo-Headline--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Headline--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Headline--white {
-  color: #fff;
+  color: var(--pk-palette-white);
 }
 .prokodo-Headline--black {
-  color: var(--color-black);
-}
-.prokodo-Headline--is-highlighted {
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: var(--pk-palette-black);
 }
 .prokodo-Headline--inherit--highlighted {
   background-image: var(--gradient-text-grey);
@@ -206,6 +200,12 @@
   -webkit-text-fill-color: transparent;
   filter: drop-shadow(var(--elevation-1--text));
 }
+.prokodo-Headline--info--highlighted {
+  background-image: var(--gradient-text-grey);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 .prokodo-Headline--xs {
   font-weight: 400;
   font-size: 1rem;

package/dist/components/headline/Headline.js

@@ -18,16 +18,15 @@ const Headline = /* @__PURE__ */ __name(({
   className,
   align,
   isRichtext = false,
-  variant = "inherit",
+  color = "inherit",
   children,
   ...remainingProps
 }) => {
-  const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(variant);
+  const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(color);
   const modifier = {
-    [variant]: !!variant,
+    [color]: !!color,
     "is-highlighted": isHighlighted,
-    highlighted: isHighlighted,
-    [`${variant}--highlighted`]: isHighlighted,
+    [`${color}--highlighted`]: isHighlighted,
     [size]: typeof size === "string" && !!size,
     [`${align}`]: !!align
   };
@@ -64,11 +63,11 @@ const Headline = /* @__PURE__ */ __name(({
         animated,
         animationProps,
         className: bem("headline", void 0, className),
+        color,
         id,
         itemProp: void 0,
         linkComponent: void 0,
         schema,
-        variant,
         ...remainingProps,
         overrideParagraph: (
           /* istanbul ignore next */