@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/snackbar/Snackbar.css

@@ -124,95 +124,156 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Snackbar_slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Snackbar_slideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
 .prokodo-Snackbar {
-  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  min-width: 288px;
-  max-width: 430px;
-  padding: 1rem 1.5rem;
-  border-radius: 8px;
-  box-shadow: var(--elevation-2);
-  background-color: var(--color-grey-900);
-  color: var(--color-white);
+  gap: var(--pk-space-md);
+  padding: var(--pk-snackbar-padding-y) var(--pk-snackbar-padding-x);
+  border-radius: var(--pk-snackbar-radius);
+  border: var(--pk-border-width) solid var(--pk-snackbar-border-color);
+  box-shadow: var(--pk-snackbar-shadow);
+  background-color: var(--pk-snackbar-bg);
+  color: var(--pk-snackbar-fg);
+  animation: Snackbar_slideIn var(--pk-snackbar-timing) ease;
 }
-.prokodo-Snackbar--success {
-  background-color: var(--color-success);
+.prokodo-Snackbar--info {
+  background-color: var(--pk-snackbar-info-bg);
+  color: var(--pk-snackbar-info-fg);
+  border-color: var(--pk-snackbar-info-border);
+  box-shadow: var(--pk-snackbar-info-shadow);
 }
-.prokodo-Snackbar--error {
-  background-color: var(--color-error);
+.prokodo-Snackbar--success {
+  background-color: var(--pk-snackbar-success-bg);
+  color: var(--pk-snackbar-success-fg);
+  border-color: var(--pk-snackbar-success-border);
+  box-shadow: var(--pk-snackbar-success-shadow);
 }
 .prokodo-Snackbar--warning {
-  background-color: var(--color-warning);
-  color: var(--color-black);
+  background-color: var(--pk-snackbar-warning-bg);
+  color: var(--pk-snackbar-warning-fg);
+  border-color: var(--pk-snackbar-warning-border);
+  box-shadow: var(--pk-snackbar-warning-shadow);
 }
-.prokodo-Snackbar--info {
-  background-color: var(--color-grey-500);
+.prokodo-Snackbar--error {
+  background-color: var(--pk-snackbar-error-bg);
+  color: var(--pk-snackbar-error-fg);
+  border-color: var(--pk-snackbar-error-border);
+  box-shadow: var(--pk-snackbar-error-shadow);
 }
-html[data-theme=dark] .prokodo-Snackbar--info {
-  background-color: var(--color-grey-300);
-  color: var(--color-grey-900);
+.prokodo-Snackbar--is-leaving {
+  animation: Snackbar_slideOut var(--pk-snackbar-timing) ease forwards;
+}
+.prokodo-Snackbar__icon {
+  flex-shrink: 0;
 }
 .prokodo-Snackbar__message {
   flex: 1 1;
+  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-Snackbar__message {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__message {
+    font-size: 1rem;
+  }
 }
 .prokodo-Snackbar__action {
-  margin-left: auto;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 }
-.prokodo-Snackbar__close {
+.prokodo-Snackbar__action button {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
+  gap: var(--pk-space-xs);
+  padding: var(--pk-space-xs) var(--pk-space-sm);
   border: none;
-  background: transparent;
+  border-radius: var(--pk-radius-sm);
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
   color: inherit;
   cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
+  font-weight: 400;
+  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.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
 }
-.prokodo-Snackbar__close:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: 2px;
+@media screen and (min-width: 480px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar__close:hover {
-  opacity: 0.8;
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar--readonly {
-  pointer-events: none;
+.prokodo-Snackbar__action button:hover {
+  background-color: color-mix(in srgb, currentColor 22%, transparent);
+  transform: scale(1.03);
 }
-
-.prokodo-SnackbarProvider {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: 8;
-  z-index: 9000;
-  pointer-events: none;
-}
-.prokodo-SnackbarProvider--is-top {
-  top: 0;
-}
-.prokodo-SnackbarProvider--is-bottom {
-  bottom: 0;
-}
-.prokodo-SnackbarProvider--is-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.prokodo-SnackbarProvider--is-left {
-  left: 1rem;
-}
-.prokodo-SnackbarProvider--is-right {
-  right: 1rem;
+.prokodo-Snackbar__action button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
-.prokodo-SnackbarProvider__snackbar {
-  pointer-events: auto;
+.prokodo-Snackbar__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
 }
-.prokodo-SnackbarProvider__snackbar--is-top {
-  margin-top: 1rem;
+.prokodo-Snackbar__close:hover {
+  background-color: color-mix(in srgb, currentColor 18%, transparent);
+  transform: scale(1.1);
 }
-.prokodo-SnackbarProvider__snackbar--is-bottom {
-  margin-bottom: 1rem;
+.prokodo-Snackbar__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

package/dist/components/snackbar/Snackbar.js

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

package/dist/components/snackbar/Snackbar.module.css

@@ -124,95 +124,156 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Snackbar_slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Snackbar_slideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
 .prokodo-Snackbar {
-  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  min-width: 288px;
-  max-width: 430px;
-  padding: 1rem 1.5rem;
-  border-radius: 8px;
-  box-shadow: var(--elevation-2);
-  background-color: var(--color-grey-900);
-  color: var(--color-white);
+  gap: var(--pk-space-md);
+  padding: var(--pk-snackbar-padding-y) var(--pk-snackbar-padding-x);
+  border-radius: var(--pk-snackbar-radius);
+  border: var(--pk-border-width) solid var(--pk-snackbar-border-color);
+  box-shadow: var(--pk-snackbar-shadow);
+  background-color: var(--pk-snackbar-bg);
+  color: var(--pk-snackbar-fg);
+  animation: Snackbar_slideIn var(--pk-snackbar-timing) ease;
 }
-.prokodo-Snackbar--success {
-  background-color: var(--color-success);
+.prokodo-Snackbar--info {
+  background-color: var(--pk-snackbar-info-bg);
+  color: var(--pk-snackbar-info-fg);
+  border-color: var(--pk-snackbar-info-border);
+  box-shadow: var(--pk-snackbar-info-shadow);
 }
-.prokodo-Snackbar--error {
-  background-color: var(--color-error);
+.prokodo-Snackbar--success {
+  background-color: var(--pk-snackbar-success-bg);
+  color: var(--pk-snackbar-success-fg);
+  border-color: var(--pk-snackbar-success-border);
+  box-shadow: var(--pk-snackbar-success-shadow);
 }
 .prokodo-Snackbar--warning {
-  background-color: var(--color-warning);
-  color: var(--color-black);
+  background-color: var(--pk-snackbar-warning-bg);
+  color: var(--pk-snackbar-warning-fg);
+  border-color: var(--pk-snackbar-warning-border);
+  box-shadow: var(--pk-snackbar-warning-shadow);
 }
-.prokodo-Snackbar--info {
-  background-color: var(--color-grey-500);
+.prokodo-Snackbar--error {
+  background-color: var(--pk-snackbar-error-bg);
+  color: var(--pk-snackbar-error-fg);
+  border-color: var(--pk-snackbar-error-border);
+  box-shadow: var(--pk-snackbar-error-shadow);
 }
-html[data-theme=dark] .prokodo-Snackbar--info {
-  background-color: var(--color-grey-300);
-  color: var(--color-grey-900);
+.prokodo-Snackbar--is-leaving {
+  animation: Snackbar_slideOut var(--pk-snackbar-timing) ease forwards;
+}
+.prokodo-Snackbar__icon {
+  flex-shrink: 0;
 }
 .prokodo-Snackbar__message {
   flex: 1 1;
+  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-Snackbar__message {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__message {
+    font-size: 1rem;
+  }
 }
 .prokodo-Snackbar__action {
-  margin-left: auto;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
 }
-.prokodo-Snackbar__close {
+.prokodo-Snackbar__action button {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
+  gap: var(--pk-space-xs);
+  padding: var(--pk-space-xs) var(--pk-space-sm);
   border: none;
-  background: transparent;
+  border-radius: var(--pk-radius-sm);
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
   color: inherit;
   cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
+  font-weight: 400;
+  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.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
 }
-.prokodo-Snackbar__close:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: 2px;
+@media screen and (min-width: 480px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar__close:hover {
-  opacity: 0.8;
+@media screen and (min-width: 960px) {
+  .prokodo-Snackbar__action button {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
 }
-.prokodo-Snackbar--readonly {
-  pointer-events: none;
+.prokodo-Snackbar__action button:hover {
+  background-color: color-mix(in srgb, currentColor 22%, transparent);
+  transform: scale(1.03);
 }
-
-.prokodo-SnackbarProvider {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: 8;
-  z-index: 9000;
-  pointer-events: none;
-}
-.prokodo-SnackbarProvider--is-top {
-  top: 0;
-}
-.prokodo-SnackbarProvider--is-bottom {
-  bottom: 0;
-}
-.prokodo-SnackbarProvider--is-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.prokodo-SnackbarProvider--is-left {
-  left: 1rem;
-}
-.prokodo-SnackbarProvider--is-right {
-  right: 1rem;
+.prokodo-Snackbar__action button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
-.prokodo-SnackbarProvider__snackbar {
-  pointer-events: auto;
+.prokodo-Snackbar__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  cursor: pointer;
+  transition: background-color var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
 }
-.prokodo-SnackbarProvider__snackbar--is-top {
-  margin-top: 1rem;
+.prokodo-Snackbar__close:hover {
+  background-color: color-mix(in srgb, currentColor 18%, transparent);
+  transform: scale(1.1);
 }
-.prokodo-SnackbarProvider__snackbar--is-bottom {
-  margin-bottom: 1rem;
+.prokodo-Snackbar__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

package/dist/components/snackbar/Snackbar.module.scss.js

@@ -1,23 +1,21 @@
+const Snackbar_slideIn = "Snackbar_slideIn";
+const Snackbar_slideOut = "Snackbar_slideOut";
 const styles = {
   "prokodo-Snackbar": "prokodo-Snackbar",
+  Snackbar_slideIn,
+  "prokodo-Snackbar--info": "prokodo-Snackbar--info",
   "prokodo-Snackbar--success": "prokodo-Snackbar--success",
-  "prokodo-Snackbar--error": "prokodo-Snackbar--error",
   "prokodo-Snackbar--warning": "prokodo-Snackbar--warning",
-  "prokodo-Snackbar--info": "prokodo-Snackbar--info",
+  "prokodo-Snackbar--error": "prokodo-Snackbar--error",
+  "prokodo-Snackbar--is-leaving": "prokodo-Snackbar--is-leaving",
+  Snackbar_slideOut,
+  "prokodo-Snackbar__icon": "prokodo-Snackbar__icon",
   "prokodo-Snackbar__message": "prokodo-Snackbar__message",
   "prokodo-Snackbar__action": "prokodo-Snackbar__action",
-  "prokodo-Snackbar__close": "prokodo-Snackbar__close",
-  "prokodo-Snackbar--readonly": "prokodo-Snackbar--readonly",
-  "prokodo-SnackbarProvider": "prokodo-SnackbarProvider",
-  "prokodo-SnackbarProvider--is-top": "prokodo-SnackbarProvider--is-top",
-  "prokodo-SnackbarProvider--is-bottom": "prokodo-SnackbarProvider--is-bottom",
-  "prokodo-SnackbarProvider--is-center": "prokodo-SnackbarProvider--is-center",
-  "prokodo-SnackbarProvider--is-left": "prokodo-SnackbarProvider--is-left",
-  "prokodo-SnackbarProvider--is-right": "prokodo-SnackbarProvider--is-right",
-  "prokodo-SnackbarProvider__snackbar": "prokodo-SnackbarProvider__snackbar",
-  "prokodo-SnackbarProvider__snackbar--is-top": "prokodo-SnackbarProvider__snackbar--is-top",
-  "prokodo-SnackbarProvider__snackbar--is-bottom": "prokodo-SnackbarProvider__snackbar--is-bottom"
+  "prokodo-Snackbar__close": "prokodo-Snackbar__close"
 };
 export {
+  Snackbar_slideIn,
+  Snackbar_slideOut,
   styles as default
 };

package/dist/components/snackbar/Snackbar.view.js

@@ -7,7 +7,7 @@ import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Snackbar");
 function SnackbarView({
   message,
-  variant = "default",
+  color = "default",
   anchorOrigin = { vertical: "bottom", horizontal: "center" },
   action,
   closeable = true,
@@ -28,7 +28,7 @@ function SnackbarView({
       className: bem(
         void 0,
         {
-          [variant]: true,
+          [color]: true,
           readonly: Boolean(readOnly),
           [pos.vertical]: true,
           [pos.horizontal]: true

package/dist/components/snackbar/SnackbarProvider.js

@@ -6,8 +6,14 @@ const SnackbarProvider = createIsland({
   name: "SnackbarProvider",
   Server: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx(Fragment, { children }), "Server"),
   // renders nothing on SSR
-  loadLazy: /* @__PURE__ */ __name(() => import("./SnackbarProvider.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./SnackbarProvider.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   SnackbarProvider

package/dist/components/stepper/Stepper.client.js

@@ -13,6 +13,7 @@ const StepperClient = forwardRef((props, ref) => {
     onBlur,
     translations,
     className,
+    color,
     ...rootProps
   } = props;
   const [activeStep, setActiveStep] = useState(initialStep);
@@ -41,21 +42,34 @@ const StepperClient = forwardRef((props, ref) => {
   );
   const handleStepKeyDown = useCallback(
     (e, index) => {
-      var _a, _b;
+      var _a, _b, _c;
       const prev = index - 1;
       const next = index + 1;
+      const isCompleted = index < activeStep;
+      const isActivationKey = e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.code === "Enter" || e.code === "Space";
+      if (isActivationKey) {
+        if (isCompleted) {
+          setActiveStep(index);
+          (_a = stepRefs.current[index]) == null ? void 0 : _a.focus();
+          onChange == null ? void 0 : onChange(e, index);
+        }
+        e.preventDefault();
+        return;
+      }
       if (e.key === "ArrowLeft") {
         if (prev >= 0 && prev < activeStep) {
           setActiveStep(prev);
-          (_a = stepRefs.current[prev]) == null ? void 0 : _a.focus();
+          (_b = stepRefs.current[prev]) == null ? void 0 : _b.focus();
           onChange == null ? void 0 : onChange(e, prev);
         }
         e.preventDefault();
       } else if (e.key === "ArrowRight") {
-        if (next < steps.length && next < activeStep) {
-          setActiveStep(next);
-          (_b = stepRefs.current[next]) == null ? void 0 : _b.focus();
-          onChange == null ? void 0 : onChange(e, next);
+        if (next < steps.length) {
+          if (next < activeStep) {
+            setActiveStep(next);
+            (_c = stepRefs.current[next]) == null ? void 0 : _c.focus();
+            onChange == null ? void 0 : onChange(e, next);
+          }
         }
         e.preventDefault();
       }
@@ -98,9 +112,12 @@ const StepperClient = forwardRef((props, ref) => {
             (_c = (_b = (_a = steps == null ? void 0 : steps[i]) == null ? void 0 : _a.innerContainerProps) == null ? void 0 : _b.onBlur) == null ? void 0 : _c.call(_b, e);
           }, "onBlur"),
           // Capture the <div role="button"> element in stepRefs.current[i]
-          ref: /* @__PURE__ */ __name((el) => {
-            stepRefs.current[i] = el;
-          }, "ref")
+          ref: (
+            /* istanbul ignore next */
+            /* @__PURE__ */ __name((el) => {
+              stepRefs.current[i] = el;
+            }, "ref")
+          )
         }
       };
     }),
@@ -112,6 +129,7 @@ const StepperClient = forwardRef((props, ref) => {
       ...rootProps,
       activeStep,
       className,
+      color,
       stepRefs,
       steps: formattedSteps,
       translations