@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/dialog/Dialog.css

@@ -124,89 +124,128 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Dialog_fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Dialog_backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .prokodo-Dialog {
+  display: none;
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(1);
-  z-index: 1300;
-  background-color: var(--color-white);
-  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
-  border-radius: 0.75rem;
-  padding: 1.5rem 1rem;
-  max-width: 600px;
-  width: auto;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  left: -99999px;
-  /* Full width modifier */
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
 }
-.prokodo-Dialog {
+.prokodo-Dialog__backdrop {
+  display: none;
   position: fixed;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
+  background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
+  animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog {
-    transition: none;
-  }
+.prokodo-Dialog__backdrop--is-visible {
+  display: flex;
 }
 .prokodo-Dialog--is-visible {
-  opacity: 1;
-  left: 50%;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translate(-50%, -50%) scale(1);
-  transition-delay: 0s;
+  display: flex;
+}
+.prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
+  position: static;
+  inset: auto;
+  z-index: auto;
+  display: contents;
 }
 .prokodo-Dialog__container {
   position: relative;
-  padding: 0.75rem;
-  max-width: 90rem;
-  margin: 0 auto;
-  /* @each $breakpoint in $screen-breakpoints {
-    $offset: nth($screen-offsets, $index);
-
-    @if ($index == 0) {
-      padding-right: $offset;
-      padding-left: $offset;
-    }
-    @else {
-      @include screenLargerThan($breakpoint) {
-        padding-right: $offset;
-        padding-left: $offset;
-      }
-    }
-
-    $index: $index + 1;
-  } */
-  /* Scroll behavior styles */
+  background-color: var(--pk-dialog-bg);
+  color: var(--pk-dialog-fg);
+  border-radius: var(--pk-dialog-radius);
+  box-shadow: var(--pk-dialog-shadow);
+  animation: Dialog_fadeIn var(--pk-timing-normal) ease;
+  max-height: 90vh;
+  overflow-y: auto;
+  width: 100%;
+  box-sizing: border-box;
 }
-.prokodo-Dialog__container:focus-visible {
-  outline: 0;
+@media screen and (min-width: 960px) {
+  .prokodo-Dialog__container {
+    min-width: 520px;
+    width: auto;
+  }
+}
+.prokodo-Dialog__container--fullScreen {
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
 }
 .prokodo-Dialog__container--scroll-paper {
-  height: 100%;
-  max-height: calc(100vh - 3rem);
   overflow-y: auto;
 }
 .prokodo-Dialog__container--scroll-body {
-  max-height: none;
-  overflow: visible;
+  overflow-y: visible;
 }
 .prokodo-Dialog__header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding-bottom: 1rem;
+  align-items: flex-start;
+  padding: var(--pk-space-2xl) var(--pk-space-2xl) var(--pk-space-md);
+  gap: var(--pk-space-md);
+}
+.prokodo-Dialog__title {
+  color: var(--pk-dialog-fg);
+  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-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Dialog__title--is-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 .prokodo-Dialog__header__button {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  border: none;
+  gap: var(--pk-space-xs);
+  flex-shrink: 0;
   background: none;
-  color: var(--color-grey-900);
+  border: none;
   cursor: pointer;
+  color: var(--pk-dialog-fg);
+  opacity: 0.5;
+  transition: opacity var(--pk-timing-fast) ease;
+  padding: var(--pk-space-xs);
+  border-radius: var(--pk-radius-sm);
+  margin-top: -2px;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -229,86 +268,22 @@
     line-height: 1.4;
   }
 }
-.prokodo-Dialog__header__button__icon {
-  margin-right: 0.25rem;
-}
-.prokodo-Dialog__header__button:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
-}
-.prokodo-Dialog__close {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.prokodo-Dialog__close__label {
-  display: inline-block;
-  padding-right: 1rem;
-  color: var(--color-grey-500);
-  text-shadow: var(--elevation--text-1);
-  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-style: normal;
-  line-height: 1.4;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-.prokodo-Dialog__close:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
+.prokodo-Dialog__header__button:hover {
+  opacity: 1;
 }
-.prokodo-Dialog__title--is-hidden {
-  position: absolute;
-  top: auto;
-  left: -99999px;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
+.prokodo-Dialog__header__button__icon {
+  flex-shrink: 0;
 }
 .prokodo-Dialog__content {
-  padding: 0 !important;
-  scrollbar-width: none;
+  padding: var(--pk-space-md) var(--pk-space-2xl);
 }
-.prokodo-Dialog__content--scroll-body {
-  height: calc(100vh - 50px);
-  overflow-y: scroll;
+.prokodo-Dialog__content--scroll-paper {
+  overflow-y: auto;
 }
 .prokodo-Dialog__actions {
   display: flex;
   justify-content: flex-end;
-  padding-top: 1rem;
-  gap: 0.75rem;
-}
-.prokodo-Dialog__backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-  z-index: 1299;
-  left: -99999px;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  opacity: 1;
-  pointer-events: auto;
-  left: 0;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  position: fixed;
-}
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog__backdrop {
-    transition: none;
-  }
-}
-.prokodo-Dialog--fullScreen {
-  max-width: none;
-  width: 100%;
-  height: 100%;
+  gap: var(--pk-space-md);
+  padding: var(--pk-space-md) var(--pk-space-2xl) var(--pk-space-2xl);
+  flex-wrap: wrap;
 }

package/dist/components/dialog/Dialog.js

@@ -5,9 +5,15 @@ import DialogServer from "./Dialog.server.js";
 const Dialog = createIsland({
   name: "Dialog",
   Server: DialogServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Dialog.lazy.js"), "loadLazy"),
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Dialog.lazy.js"), "loadLazy")
+  ),
   // erzwinge Client, sobald jemand open/close benutzt
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   Dialog

package/dist/components/dialog/Dialog.module.css

@@ -124,89 +124,128 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes Dialog_fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes Dialog_backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .prokodo-Dialog {
+  display: none;
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(1);
-  z-index: 1300;
-  background-color: var(--color-white);
-  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
-  border-radius: 0.75rem;
-  padding: 1.5rem 1rem;
-  max-width: 600px;
-  width: auto;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  left: -99999px;
-  /* Full width modifier */
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
 }
-.prokodo-Dialog {
+.prokodo-Dialog__backdrop {
+  display: none;
   position: fixed;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--pk-z-modal);
+  background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
+  animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog {
-    transition: none;
-  }
+.prokodo-Dialog__backdrop--is-visible {
+  display: flex;
 }
 .prokodo-Dialog--is-visible {
-  opacity: 1;
-  left: 50%;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translate(-50%, -50%) scale(1);
-  transition-delay: 0s;
+  display: flex;
+}
+.prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
+  position: static;
+  inset: auto;
+  z-index: auto;
+  display: contents;
 }
 .prokodo-Dialog__container {
   position: relative;
-  padding: 0.75rem;
-  max-width: 90rem;
-  margin: 0 auto;
-  /* @each $breakpoint in $screen-breakpoints {
-    $offset: nth($screen-offsets, $index);
-
-    @if ($index == 0) {
-      padding-right: $offset;
-      padding-left: $offset;
-    }
-    @else {
-      @include screenLargerThan($breakpoint) {
-        padding-right: $offset;
-        padding-left: $offset;
-      }
-    }
-
-    $index: $index + 1;
-  } */
-  /* Scroll behavior styles */
+  background-color: var(--pk-dialog-bg);
+  color: var(--pk-dialog-fg);
+  border-radius: var(--pk-dialog-radius);
+  box-shadow: var(--pk-dialog-shadow);
+  animation: Dialog_fadeIn var(--pk-timing-normal) ease;
+  max-height: 90vh;
+  overflow-y: auto;
+  width: 100%;
+  box-sizing: border-box;
 }
-.prokodo-Dialog__container:focus-visible {
-  outline: 0;
+@media screen and (min-width: 960px) {
+  .prokodo-Dialog__container {
+    min-width: 520px;
+    width: auto;
+  }
+}
+.prokodo-Dialog__container--fullScreen {
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
 }
 .prokodo-Dialog__container--scroll-paper {
-  height: 100%;
-  max-height: calc(100vh - 3rem);
   overflow-y: auto;
 }
 .prokodo-Dialog__container--scroll-body {
-  max-height: none;
-  overflow: visible;
+  overflow-y: visible;
 }
 .prokodo-Dialog__header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding-bottom: 1rem;
+  align-items: flex-start;
+  padding: var(--pk-space-2xl) var(--pk-space-2xl) var(--pk-space-md);
+  gap: var(--pk-space-md);
+}
+.prokodo-Dialog__title {
+  color: var(--pk-dialog-fg);
+  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-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-Dialog__title--is-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 .prokodo-Dialog__header__button {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  border: none;
+  gap: var(--pk-space-xs);
+  flex-shrink: 0;
   background: none;
-  color: var(--color-grey-900);
+  border: none;
   cursor: pointer;
+  color: var(--pk-dialog-fg);
+  opacity: 0.5;
+  transition: opacity var(--pk-timing-fast) ease;
+  padding: var(--pk-space-xs);
+  border-radius: var(--pk-radius-sm);
+  margin-top: -2px;
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -229,86 +268,22 @@
     line-height: 1.4;
   }
 }
-.prokodo-Dialog__header__button__icon {
-  margin-right: 0.25rem;
-}
-.prokodo-Dialog__header__button:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
-}
-.prokodo-Dialog__close {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.prokodo-Dialog__close__label {
-  display: inline-block;
-  padding-right: 1rem;
-  color: var(--color-grey-500);
-  text-shadow: var(--elevation--text-1);
-  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-style: normal;
-  line-height: 1.4;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-.prokodo-Dialog__close:focus {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
+.prokodo-Dialog__header__button:hover {
+  opacity: 1;
 }
-.prokodo-Dialog__title--is-hidden {
-  position: absolute;
-  top: auto;
-  left: -99999px;
-  width: 0;
-  height: 0;
-  text-indent: -99999px;
+.prokodo-Dialog__header__button__icon {
+  flex-shrink: 0;
 }
 .prokodo-Dialog__content {
-  padding: 0 !important;
-  scrollbar-width: none;
+  padding: var(--pk-space-md) var(--pk-space-2xl);
 }
-.prokodo-Dialog__content--scroll-body {
-  height: calc(100vh - 50px);
-  overflow-y: scroll;
+.prokodo-Dialog__content--scroll-paper {
+  overflow-y: auto;
 }
 .prokodo-Dialog__actions {
   display: flex;
   justify-content: flex-end;
-  padding-top: 1rem;
-  gap: 0.75rem;
-}
-.prokodo-Dialog__backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-  z-index: 1299;
-  left: -99999px;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  opacity: 1;
-  pointer-events: auto;
-  left: 0;
-}
-.prokodo-Dialog__backdrop--is-visible {
-  position: fixed;
-}
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Dialog__backdrop {
-    transition: none;
-  }
-}
-.prokodo-Dialog--fullScreen {
-  max-width: none;
-  width: 100%;
-  height: 100%;
+  gap: var(--pk-space-md);
+  padding: var(--pk-space-md) var(--pk-space-2xl) var(--pk-space-2xl);
+  flex-wrap: wrap;
 }

package/dist/components/dialog/Dialog.module.scss.js

@@ -1,22 +1,27 @@
+const Dialog_backdropFadeIn = "Dialog_backdropFadeIn";
+const Dialog_fadeIn = "Dialog_fadeIn";
 const styles = {
   "prokodo-Dialog": "prokodo-Dialog",
+  "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
+  Dialog_backdropFadeIn,
+  "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
   "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
   "prokodo-Dialog__container": "prokodo-Dialog__container",
+  Dialog_fadeIn,
+  "prokodo-Dialog__container--fullScreen": "prokodo-Dialog__container--fullScreen",
   "prokodo-Dialog__container--scroll-paper": "prokodo-Dialog__container--scroll-paper",
   "prokodo-Dialog__container--scroll-body": "prokodo-Dialog__container--scroll-body",
   "prokodo-Dialog__header": "prokodo-Dialog__header",
+  "prokodo-Dialog__title": "prokodo-Dialog__title",
+  "prokodo-Dialog__title--is-hidden": "prokodo-Dialog__title--is-hidden",
   "prokodo-Dialog__header__button": "prokodo-Dialog__header__button",
   "prokodo-Dialog__header__button__icon": "prokodo-Dialog__header__button__icon",
-  "prokodo-Dialog__close": "prokodo-Dialog__close",
-  "prokodo-Dialog__close__label": "prokodo-Dialog__close__label",
-  "prokodo-Dialog__title--is-hidden": "prokodo-Dialog__title--is-hidden",
   "prokodo-Dialog__content": "prokodo-Dialog__content",
-  "prokodo-Dialog__content--scroll-body": "prokodo-Dialog__content--scroll-body",
-  "prokodo-Dialog__actions": "prokodo-Dialog__actions",
-  "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
-  "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
-  "prokodo-Dialog--fullScreen": "prokodo-Dialog--fullScreen"
+  "prokodo-Dialog__content--scroll-paper": "prokodo-Dialog__content--scroll-paper",
+  "prokodo-Dialog__actions": "prokodo-Dialog__actions"
 };
 export {
+  Dialog_backdropFadeIn,
+  Dialog_fadeIn,
   styles as default
 };

package/dist/components/dialog/Dialog.view.js

@@ -44,9 +44,12 @@ function DialogView({
     fullScreen,
     "is-visible": Boolean(open)
   };
-  const styleModifier = isNumber(height) ? {
-    maxHeight: `${height}px`
-  } : void 0;
+  const styleModifier = isNumber(height) ? (
+    /* istanbul ignore next */
+    {
+      maxHeight: `${height}px`
+    }
+  ) : void 0;
   const renderDialog = /* @__PURE__ */ __name(() => {
     var _a;
     return /* @__PURE__ */ jsxs(
@@ -85,10 +88,14 @@ function DialogView({
                     {
                       ...closeButtonProps,
                       ref: closeButtonRef,
-                      "aria-label": (closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) ?? (translations == null ? void 0 : translations.close),
+                      "aria-label": (
+                        /* istanbul ignore next */
+                        (closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) ?? (translations == null ? void 0 : translations.close)
+                      ),
                       className: bem(
                         "header__button",
                         void 0,
+                        /* istanbul ignore next */
                         closeButtonProps == null ? void 0 : closeButtonProps.className
                       ),
                       onClick: onClose,
@@ -103,6 +110,7 @@ function DialogView({
                             className: bem(
                               "header__button__icon",
                               void 0,
+                              /* istanbul ignore next */
                               (_a = closeButtonProps == null ? void 0 : closeButtonProps.iconProps) == null ? void 0 : _a.className
                             )
                           }
@@ -129,7 +137,17 @@ function DialogView({
                 ),
                 actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: bem("actions", void 0, actionsClassName), children: [
                   /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 }),
-                  actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action, title: (action == null ? void 0 : action.title) ?? "" }, action.id)),
+                  actions.map((action) => /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...action,
+                      title: (
+                        /* istanbul ignore next */
+                        (action == null ? void 0 : action.title) ?? ""
+                      )
+                    },
+                    action.id
+                  )),
                   /* @__PURE__ */ jsx("div", { "aria-hidden": "true", tabIndex: 0 })
                 ] })
               ]

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

@@ -50,7 +50,6 @@ function DrawerClient({
       setMounted(false);
       (_b = (_a = triggerRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
     }, "onEnd");
-    node.addEventListener("transitionend", onEnd);
     const t = setTimeout(() => {
       var _a, _b;
       node.removeEventListener("transitionend", onEnd);