@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/sidenav/SideNav.view.js

@@ -5,9 +5,11 @@ import { create } from "../../helpers/bem.js";
 import styles from "./SideNav.module.scss.js";
 import { Icon } from "../icon/Icon.js";
 import { Link } from "../link/Link.js";
+import { Headline } from "../headline/Headline.js";
 const bem = create(styles, "SideNav");
 function SideNavView({
   items,
+  sections,
   collapsed,
   collapsedLabel = "Expand menu",
   collapsedIcon = "ArrowRight01Icon",
@@ -18,7 +20,9 @@ function SideNavView({
   interactive = true,
   ariaLabel = "Main navigation",
   className,
-  renderFooter
+  renderFooter,
+  headlineProps: globalHeadlineProps,
+  descriptionProps: globalDescriptionProps
 }) {
   const renderItem = /* @__PURE__ */ __name((icon, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(
@@ -31,6 +35,69 @@ function SideNavView({
     ) }),
     !collapsed && /* @__PURE__ */ jsx("span", { className: bem("label", { collapsed }), children: label })
   ] }), "renderItem");
+  const renderNavItem = /* @__PURE__ */ __name(({ label, icon, redirect, active }) => /* @__PURE__ */ jsx("li", { children: (redirect == null ? void 0 : redirect.href) !== void 0 ? /* @__PURE__ */ jsx(
+    Link,
+    {
+      ...redirect,
+      href: redirect.href,
+      className: bem(
+        "link",
+        { collapsed, "is-active": Boolean(active) },
+        redirect == null ? void 0 : redirect.className
+      ),
+      children: renderItem(icon, label)
+    }
+  ) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label), "renderNavItem");
+  const renderSection = /* @__PURE__ */ __name((section, index) => {
+    const {
+      headline,
+      description,
+      headlineComponent: HeadlineComponent,
+      headlineProps: sectionHeadlineProps,
+      descriptionProps: sectionDescriptionProps,
+      items: sectionItems
+    } = section;
+    const mergedHeadlineProps = {
+      ...globalHeadlineProps,
+      ...sectionHeadlineProps
+    };
+    const mergedDescriptionProps = {
+      ...globalDescriptionProps,
+      ...sectionDescriptionProps
+    };
+    const showHeader = !collapsed && (headline || description || HeadlineComponent);
+    return /* @__PURE__ */ jsxs("div", { className: bem("section"), children: [
+      showHeader && /* @__PURE__ */ jsxs("div", { className: bem("section__header"), children: [
+        HeadlineComponent ? /* @__PURE__ */ jsx(HeadlineComponent, { className: bem("section__headline") }) : headline && /* @__PURE__ */ jsx(
+          Headline,
+          {
+            size: "xs",
+            type: "h6",
+            ...mergedHeadlineProps,
+            className: bem(
+              "section__headline",
+              void 0,
+              mergedHeadlineProps == null ? void 0 : mergedHeadlineProps.className
+            ),
+            children: headline
+          }
+        ),
+        !HeadlineComponent && description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            ...mergedDescriptionProps,
+            className: bem(
+              "section__description",
+              void 0,
+              mergedDescriptionProps == null ? void 0 : mergedDescriptionProps.className
+            ),
+            children: description
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: bem("list"), children: sectionItems.map(renderNavItem) })
+    ] }, index);
+  }, "renderSection");
   return /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -59,19 +126,7 @@ function SideNavView({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("nav", { id: "sidenav", children: /* @__PURE__ */ jsx("ul", { className: bem("list"), children: items.map(({ label, icon, redirect, active }) => /* @__PURE__ */ jsx("li", { children: (redirect == null ? void 0 : redirect.href) !== void 0 ? /* @__PURE__ */ jsx(
-          Link,
-          {
-            ...redirect,
-            href: redirect.href,
-            className: bem(
-              "link",
-              { collapsed, "is-active": Boolean(active) },
-              redirect == null ? void 0 : redirect.className
-            ),
-            children: renderItem(icon, label)
-          }
-        ) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label)) }) }),
+        /* @__PURE__ */ jsx("nav", { id: "sidenav", children: sections && sections.length > 0 ? /* @__PURE__ */ jsx("div", { className: bem("sections"), children: sections.map(renderSection) }) : /* @__PURE__ */ jsx("ul", { className: bem("list"), children: (items ?? []).map(renderNavItem) }) }),
         renderFooter !== void 0 && !collapsed && renderFooter()
       ]
     }

package/dist/components/skeleton/Skeleton.css

@@ -150,8 +150,8 @@
 }
 .prokodo-Skeleton {
   display: inline-block;
-  background-color: rgba(255, 255, 255, 0.11);
-  border-radius: 4px;
+  background-color: var(--pk-skeleton-bg);
+  border-radius: var(--pk-skeleton-radius);
   position: relative;
   overflow: hidden;
   /* shimmer carrier (animation is attached in modifier) */
@@ -159,7 +159,7 @@
   /* animation hooks (keyframes live in effects sheet) */
 }
 html[data-theme=dark] .prokodo-Skeleton {
-  background-color: rgba(30, 48, 79, 0.11);
+  background-color: var(--pk-skeleton-bg-dark);
 }
 .prokodo-Skeleton::after {
   content: "";
@@ -167,18 +167,18 @@ html[data-theme=dark] .prokodo-Skeleton {
   position: absolute;
   inset: 0;
   left: -100%;
-  background: linear-gradient(90deg, transparent, var(--color-white), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg), transparent);
   opacity: 0.6;
 }
 html[data-theme=dark] .prokodo-Skeleton::after {
-  background: linear-gradient(90deg, transparent, var(--color-primary-50), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg-dark), transparent);
 }
 .prokodo-Skeleton--text {
   height: 1em;
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--rectangular {
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--circular {
   border-radius: 50%;

package/dist/components/skeleton/Skeleton.module.css

@@ -150,8 +150,8 @@
 }
 .prokodo-Skeleton {
   display: inline-block;
-  background-color: rgba(255, 255, 255, 0.11);
-  border-radius: 4px;
+  background-color: var(--pk-skeleton-bg);
+  border-radius: var(--pk-skeleton-radius);
   position: relative;
   overflow: hidden;
   /* shimmer carrier (animation is attached in modifier) */
@@ -159,7 +159,7 @@
   /* animation hooks (keyframes live in effects sheet) */
 }
 html[data-theme=dark] .prokodo-Skeleton {
-  background-color: rgba(30, 48, 79, 0.11);
+  background-color: var(--pk-skeleton-bg-dark);
 }
 .prokodo-Skeleton::after {
   content: "";
@@ -167,18 +167,18 @@ html[data-theme=dark] .prokodo-Skeleton {
   position: absolute;
   inset: 0;
   left: -100%;
-  background: linear-gradient(90deg, transparent, var(--color-white), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg), transparent);
   opacity: 0.6;
 }
 html[data-theme=dark] .prokodo-Skeleton::after {
-  background: linear-gradient(90deg, transparent, var(--color-primary-50), transparent);
+  background: linear-gradient(90deg, transparent, var(--pk-skeleton-shimmer-fg-dark), transparent);
 }
 .prokodo-Skeleton--text {
   height: 1em;
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--rectangular {
-  border-radius: 4px;
+  border-radius: var(--pk-skeleton-radius);
 }
 .prokodo-Skeleton--circular {
   border-radius: 50%;

package/dist/components/slider/Slider.css

@@ -125,10 +125,60 @@
  * content.
  */
 .prokodo-Slider {
-  padding-bottom: 1.5rem;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pk-space-xs);
+}
+.prokodo-Slider--primary {
+  --pk-slider-fill-from: var(--pk-color-brand);
+  --pk-slider-fill-to: var(--pk-color-accent);
+}
+.prokodo-Slider--secondary {
+  --pk-slider-fill-from: var(--pk-color-accent);
+  --pk-slider-fill-to: var(--pk-color-brand);
+}
+.prokodo-Slider--success {
+  --pk-slider-fill-from: var(--pk-color-success);
+  --pk-slider-fill-to: #10CCB8;
+}
+.prokodo-Slider--warning {
+  --pk-slider-fill-from: var(--pk-color-warning);
+  --pk-slider-fill-to: #f7cc6a;
+}
+.prokodo-Slider--error {
+  --pk-slider-fill-from: var(--pk-color-error);
+  --pk-slider-fill-to: #ff6b6b;
+}
+.prokodo-Slider--info, .prokodo-Slider--inherit, .prokodo-Slider--white {
+  --pk-slider-fill-from: var(--pk-color-muted);
+  --pk-slider-fill-to: var(--pk-color-border);
+}
+.prokodo-Slider__label {
+  color: var(--pk-slider-label-fg);
+  font-weight: 400;
+  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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Slider__label {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Slider__label {
+    font-size: 1rem;
+  }
 }
 .prokodo-Slider__label {
-  padding-bottom: 2rem;
+  transition: transform var(--pk-slider-timing) ease;
 }
 .prokodo-Slider__label--is-hidden {
   position: absolute;
@@ -141,62 +191,63 @@
 .prokodo-Slider__root {
   position: relative;
   width: 100%;
-  height: 30px;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  touch-action: none;
-  -webkit-tap-highlight-color: transparent;
+  height: calc(var(--pk-slider-tooltip-height) + var(--pk-slider-tooltip-gap) + var(--pk-slider-thumb-size) + var(--pk-slider-mark-label-height));
+  margin-top: calc(-1 * (var(--pk-slider-tooltip-height) + var(--pk-slider-tooltip-gap)));
+  transition: margin-top var(--pk-slider-timing) ease;
 }
 .prokodo-Slider__root--disabled {
-  cursor: default;
-  pointer-events: none;
   opacity: 0.4;
+  pointer-events: none;
+  cursor: not-allowed;
 }
 .prokodo-Slider__rail {
   position: absolute;
-  width: 100%;
-  height: 4px;
-  top: 50%;
+  left: 0;
+  right: 0;
+  top: calc(var(--pk-slider-tooltip-height) + var(--pk-slider-tooltip-gap) + var(--pk-slider-thumb-size) / 2);
   transform: translateY(-50%);
-  border-radius: 6px;
-  opacity: 0.3;
-  z-index: 1;
-  background: var(--gradient-background-primary-grey-secondary);
+  height: var(--pk-slider-track-height);
+  border-radius: 9999px;
+  background: linear-gradient(90deg, var(--pk-slider-fill-from), var(--pk-slider-fill-to));
+  opacity: 0.25;
+  pointer-events: none;
 }
 .prokodo-Slider__track {
   position: absolute;
-  height: 4px;
-  top: 50%;
+  left: 0;
+  top: calc(var(--pk-slider-tooltip-height) + var(--pk-slider-tooltip-gap) + var(--pk-slider-thumb-size) / 2);
   transform: translateY(-50%);
-  border-radius: 6px;
-  z-index: 2;
-  background: var(--gradient-background-primary-secondary);
+  height: var(--pk-slider-track-height);
+  border-radius: 9999px;
+  background: linear-gradient(90deg, var(--pk-slider-fill-from), var(--pk-slider-fill-to));
+  pointer-events: none;
+  transition: width var(--pk-slider-timing) ease;
 }
 .prokodo-Slider__mark {
   position: absolute;
-  width: 20px;
-  height: 20px;
-  background-color: #dedede;
+  top: calc(var(--pk-slider-tooltip-height) + var(--pk-slider-tooltip-gap) + var(--pk-slider-thumb-size) + 4px);
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+.prokodo-Slider__mark::before {
+  content: "";
+  display: block;
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
-  top: 50%;
-  text-align: center;
-  transform: translateX(-50%) translateY(-50%);
-  z-index: 3;
+  background-color: var(--pk-slider-mark-bg);
+  margin-bottom: 2px;
 }
 .prokodo-Slider__mark__label {
-  position: relative;
-  display: inline-block;
-  bottom: 0;
-  left: 50%;
-  padding-top: 1.5rem;
-  transform: translateX(-50%);
-  color: var(--color-grey-300);
+  color: var(--pk-slider-mark-label-fg);
   font-weight: 400;
-  font-size: 1.125rem;
+  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.55;
+  line-height: 1.45;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
@@ -204,102 +255,116 @@
 }
 @media screen and (min-width: 480px) {
   .prokodo-Slider__mark__label {
-    font-size: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
   }
 }
 @media screen and (min-width: 960px) {
   .prokodo-Slider__mark__label {
-    font-size: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
   }
 }
 .prokodo-Slider__mark__label {
-  text-align: center;
-  font-size: 0.8rem;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Slider__mark__label {
-    position: static;
-    width: auto;
-    height: auto;
-    left: auto;
-    text-indent: inherit;
-    margin-left: 50%;
-    min-width: 100px;
-    font-size: 1rem;
-  }
+  white-space: nowrap;
 }
 .prokodo-Slider__input {
-  /* Native Slider-Optik verbergen, aber Funktion erhalten */
-  -moz-appearance: none;
-       appearance: none;
-  -webkit-appearance: none;
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
-  background: transparent;
-  position: relative;
-  z-index: 4;
+  opacity: 0;
+  cursor: pointer;
   margin: 0;
-  padding: 0;
-  cursor: inherit;
-}
-.prokodo-Slider__input:focus {
-  outline: none;
-}
-.prokodo-Slider__input::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 0;
-  height: 0;
-}
-.prokodo-Slider__input::-webkit-slider-runnable-track {
-  -webkit-appearance: none;
-  background: transparent;
-  border: none;
-}
-.prokodo-Slider__input::-moz-range-thumb {
-  width: 0;
-  height: 0;
-  background: transparent;
-  border: none;
-}
-.prokodo-Slider__input::-moz-range-track {
-  background: transparent;
-  border: none;
-}
-.prokodo-Slider__thumb {
-  position: absolute;
-  top: 50%;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background-color: var(--color-primary-500);
-  transform: translateX(-50%) translateY(-50%);
-  transition: box-shadow 120ms ease, transform 120ms ease;
-  z-index: 3;
-  background: var(--gradient-background-primary-secondary);
+  z-index: 2;
 }
-.prokodo-Slider__thumb:hover {
-  box-shadow: 0 0 0 6px rgba(var(--color-primary-500-rgb), 0.3);
-}
-.prokodo-Slider__thumb--focused {
-  box-shadow: 0 0 0 6px rgba(var(--color-primary-700-rgb), 0.3);
-  outline: none;
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 100%;
+.prokodo-Slider__input:disabled {
+  cursor: not-allowed;
 }
 .prokodo-Slider__valueText {
   position: absolute;
-  top: -1.7em;
-  white-space: nowrap;
+  top: 0;
   transform: translateX(-50%);
-  z-index: 4;
+  background-color: var(--pk-slider-tooltip-bg);
+  color: var(--pk-slider-tooltip-fg);
+  border-radius: 999px;
+  padding: 3px calc(var(--pk-space-xs) * 1.5);
+  height: var(--pk-slider-tooltip-height);
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity var(--pk-slider-timing) ease;
   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-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.45;
   letter-spacing: 0.03em;
   text-transform: none;
   text-align: left;
   text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Slider__valueText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Slider__valueText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Slider__valueText--focused {
+  opacity: 1;
+}
+@media (hover: hover) {
+  .prokodo-Slider:hover .prokodo-Slider__root {
+    margin-top: 0;
+  }
+  .prokodo-Slider:hover .prokodo-Slider__valueText {
+    opacity: 1;
+  }
+  .prokodo-Slider:hover .prokodo-Slider__label {
+    transform: translateY(var(--pk-space-xs));
+  }
+}
+.prokodo-Slider:has(.prokodo-Slider__valueText--focused) .prokodo-Slider__root {
+  margin-top: 0;
+}
+.prokodo-Slider:has(.prokodo-Slider__valueText--focused) .prokodo-Slider__label {
+  transform: translateY(var(--pk-space-xs));
+}
+@media (hover: none) {
+  .prokodo-Slider__root {
+    margin-top: 0;
+  }
+  .prokodo-Slider__valueText {
+    opacity: 1;
+  }
+  .prokodo-Slider__label {
+    transition: none;
+  }
+}
+.prokodo-Slider__thumb {
+  position: absolute;
+  top: calc(var(--pk-slider-tooltip-height) + var(--pk-slider-tooltip-gap) + var(--pk-slider-thumb-size) / 2);
+  transform: translate(-50%, -50%);
+  width: var(--pk-slider-thumb-size);
+  height: var(--pk-slider-thumb-size);
+  border-radius: 50%;
+  background: radial-gradient(circle at 38% 38%, color-mix(in srgb, var(--pk-slider-fill-to) 60%, white 40%), var(--pk-slider-fill-from) 70%);
+  border: 2.5px solid var(--pk-slider-thumb-border);
+  box-shadow: var(--pk-shadow-sm), 0 0 0 4px rgb(var(--pk-slider-thumb-glow-rgb)/0.18);
+  pointer-events: none;
+  z-index: 1;
+  transition: box-shadow var(--pk-slider-timing) ease, transform var(--pk-slider-timing) ease;
+}
+.prokodo-Slider__thumb--focused {
+  box-shadow: var(--pk-shadow-sm), 0 0 0 8px rgb(var(--pk-slider-thumb-glow-rgb)/0.3);
+  transform: translate(-50%, -50%) scale(1.12);
 }