@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/slider/Slider.module.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);
 }

package/dist/components/slider/Slider.module.scss.js

@@ -1,5 +1,13 @@
 const styles = {
   "prokodo-Slider": "prokodo-Slider",
+  "prokodo-Slider--primary": "prokodo-Slider--primary",
+  "prokodo-Slider--secondary": "prokodo-Slider--secondary",
+  "prokodo-Slider--success": "prokodo-Slider--success",
+  "prokodo-Slider--warning": "prokodo-Slider--warning",
+  "prokodo-Slider--error": "prokodo-Slider--error",
+  "prokodo-Slider--info": "prokodo-Slider--info",
+  "prokodo-Slider--inherit": "prokodo-Slider--inherit",
+  "prokodo-Slider--white": "prokodo-Slider--white",
   "prokodo-Slider__label": "prokodo-Slider__label",
   "prokodo-Slider__label--is-hidden": "prokodo-Slider__label--is-hidden",
   "prokodo-Slider__root": "prokodo-Slider__root",
@@ -9,9 +17,10 @@ const styles = {
   "prokodo-Slider__mark": "prokodo-Slider__mark",
   "prokodo-Slider__mark__label": "prokodo-Slider__mark__label",
   "prokodo-Slider__input": "prokodo-Slider__input",
+  "prokodo-Slider__valueText": "prokodo-Slider__valueText",
+  "prokodo-Slider__valueText--focused": "prokodo-Slider__valueText--focused",
   "prokodo-Slider__thumb": "prokodo-Slider__thumb",
-  "prokodo-Slider__thumb--focused": "prokodo-Slider__thumb--focused",
-  "prokodo-Slider__valueText": "prokodo-Slider__valueText"
+  "prokodo-Slider__thumb--focused": "prokodo-Slider__thumb--focused"
 };
 export {
   styles as default

package/dist/components/slider/Slider.view.js

@@ -28,6 +28,7 @@ const SliderView = /* @__PURE__ */ __name(({
   marks = false,
   valueLabelProps = {},
   className,
+  color,
   internalValue,
   isFocused,
   onFocusInternal,
@@ -67,110 +68,121 @@ const SliderView = /* @__PURE__ */ __name(({
     }
     markPoints = pts;
   }
-  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
-    isString(label) && /* @__PURE__ */ jsx(
-      Label,
-      {
-        ...labelProps,
-        htmlFor: id,
-        label,
-        required,
-        className: bem("label", {
-          "is-hidden": Boolean(hideLabel)
-        })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: bem("root", { disabled: Boolean(disabled) }), children: [
-      /* @__PURE__ */ jsx("div", { className: bem("rail") }),
-      /* @__PURE__ */ jsx("div", { className: bem("track"), style: { width: `${pct}%` } }),
-      markPoints.map((m) => {
-        const leftPct = max > min ? (
-          /* istanbul ignore next */
-          ((m.value < min ? (
-            /* istanbul ignore next */
-            min
-          ) : (
-            /* istanbul ignore next */
-            m.value > max ? (
-              /* istanbul ignore next */
-              max
-            ) : m.value
-          )) - min) / (max - min) * 100
-        ) : (
-          /* istanbul ignore next */
-          0
-        );
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: bem("mark"),
-            style: { left: `${leftPct}%` },
-            children: typeof m.label === "string" ? /* @__PURE__ */ jsx("span", { className: bem("mark__label"), children: m.label }) : null
-          },
-          m.value
-        );
-      }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          "aria-disabled": Boolean(disabled) || void 0,
-          "aria-label": label,
-          "aria-valuemax": max,
-          "aria-valuemin": min,
-          "aria-valuenow": internalValue,
-          "aria-valuetext": String(internalValue),
-          className: bem("input"),
-          disabled,
-          id,
-          max,
-          min,
-          step,
-          type: "range",
-          value: internalValue,
-          onBlur: onBlurInternal,
-          onChange: onChangeInternal,
-          onFocus: onFocusInternal
-        }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: bem(
+        void 0,
+        color ? { [color]: true } : void 0,
+        className
       ),
-      !Boolean(disabled) && /* @__PURE__ */ jsx(
-        "span",
-        {
-          ...valueLabelProps,
-          className: bem("valueText", { focused: isFocused }),
-          style: (() => {
-            const EDGE_PAD_PX = 8;
-            if (pct <= 10) {
-              return {
-                left: "0%",
-                transform: `translateX(${EDGE_PAD_PX}px)`
-              };
+      children: [
+        isString(label) && /* @__PURE__ */ jsx(
+          Label,
+          {
+            ...labelProps,
+            color,
+            htmlFor: id,
+            label,
+            required,
+            className: bem("label", {
+              "is-hidden": Boolean(hideLabel)
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: bem("root", { disabled: Boolean(disabled) }), children: [
+          /* @__PURE__ */ jsx("div", { className: bem("rail") }),
+          /* @__PURE__ */ jsx("div", { className: bem("track"), style: { width: `${pct}%` } }),
+          markPoints.map((m) => {
+            const leftPct = max > min ? (
+              /* istanbul ignore next */
+              ((m.value < min ? (
+                /* istanbul ignore next */
+                min
+              ) : (
+                /* istanbul ignore next */
+                m.value > max ? (
+                  /* istanbul ignore next */
+                  max
+                ) : m.value
+              )) - min) / (max - min) * 100
+            ) : (
+              /* istanbul ignore next */
+              0
+            );
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: bem("mark"),
+                style: { left: `${leftPct}%` },
+                children: typeof m.label === "string" ? /* @__PURE__ */ jsx("span", { className: bem("mark__label"), children: m.label }) : null
+              },
+              m.value
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-disabled": Boolean(disabled) || void 0,
+              "aria-label": label,
+              "aria-valuemax": max,
+              "aria-valuemin": min,
+              "aria-valuenow": internalValue,
+              "aria-valuetext": String(internalValue),
+              className: bem("input"),
+              disabled,
+              id,
+              max,
+              min,
+              step,
+              type: "range",
+              value: internalValue,
+              onBlur: onBlurInternal,
+              onChange: onChangeInternal,
+              onFocus: onFocusInternal
             }
-            if (pct >= 90) {
-              return {
-                left: "100%",
-                transform: `translateX(calc(-100% - ${EDGE_PAD_PX}px))`
-              };
+          ),
+          !Boolean(disabled) && /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...valueLabelProps,
+              className: bem("valueText", { focused: isFocused }),
+              style: (() => {
+                const EDGE_PAD_PX = 8;
+                if (pct <= 10) {
+                  return {
+                    left: "0%",
+                    transform: `translateX(${EDGE_PAD_PX}px)`
+                  };
+                }
+                if (pct >= 90) {
+                  return {
+                    left: "100%",
+                    transform: `translateX(calc(-100% - ${EDGE_PAD_PX}px))`
+                  };
+                }
+                return {
+                  left: `${pct}%`,
+                  transform: "translateX(-50%)"
+                };
+              })(),
+              children: internalValue
             }
-            return {
-              left: `${pct}%`,
-              transform: "translateX(-50%)"
-            };
-          })(),
-          children: internalValue
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: bem("thumb", { focused: isFocused }),
-          style: {
-            left: `${pct}%`
-          }
-        }
-      )
-    ] })
-  ] });
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem("thumb", { focused: isFocused }),
+              style: {
+                left: `${pct}%`
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }, "SliderView");
 export {
   SliderView