@prokodo/ui 0.1.4 → 0.1.5

package/dist/components/accordion/Accordion.css

@@ -0,0 +1,288 @@
+@charset "UTF-8";
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+/* Keep this out of the critical/render-blocking bundle. */
+@keyframes accordionBorderShift {
+  from {
+    background-position: 0 0, 0% 0;
+  }
+  to {
+    background-position: 0 0, 200% 0;
+  }
+}
+.prokodo-Accordion {
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Accordion__item {
+  border: 1px solid var(--color-grey-200);
+  border-radius: 0.75rem;
+  margin-bottom: 8px;
+  overflow: hidden;
+  transition: border 0.3s ease;
+  box-shadow: var(--elevation-3);
+}
+.prokodo-Accordion__item--is-expanded {
+  border-color: var(--color-primary-500);
+}
+.prokodo-Accordion__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+}
+.prokodo-Accordion__header__toggle {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+  gap: 0.75rem;
+}
+.prokodo-Accordion__header__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.prokodo-Accordion__header__actions__wrapper {
+  display: flex;
+}
+.prokodo-Accordion__header__icons {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+}
+.prokodo-Accordion__header__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* reserve space for a “border” without layout jump */
+  border: 2px solid transparent;
+  border-radius: 12px;
+  /* two-background trick: inner fill + border gradient */
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white))) padding-box, linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500)) border-box;
+  /* hide the border layer initially */
+  background-size: 100% 100%, 0% 100%;
+  background-position: 0 0, 0 0;
+  background-repeat: no-repeat;
+  transition: color 0.3s ease, background-size 0.35s ease;
+}
+.prokodo-Accordion__header__wrapper:hover, .prokodo-Accordion__header__wrapper:focus-visible {
+  /* reveal the border layer */
+  background-size: 100% 100%, 200% 100%;
+  /* animation name is defined in the EFFECTS sheet */
+  animation: accordionBorderShift 2s linear;
+  outline: none;
+}
+.prokodo-Accordion__header__wrapper--is-expanded {
+  position: relative;
+  z-index: 2;
+  /* keep border visible and settled */
+  background-size: 100% 100%, 100% 100%;
+  background-position: 0 0, 100% 0;
+  border-radius: 12px 12px 0 0;
+  animation: none !important;
+  box-shadow: var(--elevation-1);
+}
+.prokodo-Accordion__title {
+  width: calc(100% - 20px);
+  margin: 0;
+  font-weight: 500 !important;
+  font-size: 1.125rem !important;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-style: normal !important;
+  line-height: 1.55 !important;
+  letter-spacing: 0.03em !important;
+  text-transform: none !important;
+  text-align: left !important;
+  text-decoration: none !important;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+}
+.prokodo-Accordion__title {
+  font-weight: 500;
+}
+.prokodo-Accordion__icon {
+  padding-left: 1rem;
+  transition: transform 0.3s ease;
+}
+.prokodo-Accordion__icon--is-hidden {
+  display: none !important;
+}
+.prokodo-Accordion__content {
+  padding: 16px;
+  background-color: var(--color-white);
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  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.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Accordion__content {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Accordion__content {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+.prokodo-Accordion__content[hidden] {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.prokodo-Accordion__content--is-expanded {
+  opacity: 1;
+  pointer-events: auto;
+}
+.prokodo-Accordion__actions {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  background-color: var(--color-grey-100);
+  border-top: 1px solid var(--color-grey-200);
+}

package/dist/components/accordion/Accordion.module.css

@@ -0,0 +1,288 @@
+@charset "UTF-8";
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+/* Keep this out of the critical/render-blocking bundle. */
+@keyframes accordionBorderShift {
+  from {
+    background-position: 0 0, 0% 0;
+  }
+  to {
+    background-position: 0 0, 200% 0;
+  }
+}
+.prokodo-Accordion {
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Accordion__item {
+  border: 1px solid var(--color-grey-200);
+  border-radius: 0.75rem;
+  margin-bottom: 8px;
+  overflow: hidden;
+  transition: border 0.3s ease;
+  box-shadow: var(--elevation-3);
+}
+.prokodo-Accordion__item--is-expanded {
+  border-color: var(--color-primary-500);
+}
+.prokodo-Accordion__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+}
+.prokodo-Accordion__header__toggle {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+  gap: 0.75rem;
+}
+.prokodo-Accordion__header__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.prokodo-Accordion__header__actions__wrapper {
+  display: flex;
+}
+.prokodo-Accordion__header__icons {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+}
+.prokodo-Accordion__header__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* reserve space for a “border” without layout jump */
+  border: 2px solid transparent;
+  border-radius: 12px;
+  /* two-background trick: inner fill + border gradient */
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white))) padding-box, linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500)) border-box;
+  /* hide the border layer initially */
+  background-size: 100% 100%, 0% 100%;
+  background-position: 0 0, 0 0;
+  background-repeat: no-repeat;
+  transition: color 0.3s ease, background-size 0.35s ease;
+}
+.prokodo-Accordion__header__wrapper:hover, .prokodo-Accordion__header__wrapper:focus-visible {
+  /* reveal the border layer */
+  background-size: 100% 100%, 200% 100%;
+  /* animation name is defined in the EFFECTS sheet */
+  animation: accordionBorderShift 2s linear;
+  outline: none;
+}
+.prokodo-Accordion__header__wrapper--is-expanded {
+  position: relative;
+  z-index: 2;
+  /* keep border visible and settled */
+  background-size: 100% 100%, 100% 100%;
+  background-position: 0 0, 100% 0;
+  border-radius: 12px 12px 0 0;
+  animation: none !important;
+  box-shadow: var(--elevation-1);
+}
+.prokodo-Accordion__title {
+  width: calc(100% - 20px);
+  margin: 0;
+  font-weight: 500 !important;
+  font-size: 1.125rem !important;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+  font-style: normal !important;
+  line-height: 1.55 !important;
+  letter-spacing: 0.03em !important;
+  text-transform: none !important;
+  text-align: left !important;
+  text-decoration: none !important;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Accordion__title {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+}
+.prokodo-Accordion__title {
+  font-weight: 500;
+}
+.prokodo-Accordion__icon {
+  padding-left: 1rem;
+  transition: transform 0.3s ease;
+}
+.prokodo-Accordion__icon--is-hidden {
+  display: none !important;
+}
+.prokodo-Accordion__content {
+  padding: 16px;
+  background-color: var(--color-white);
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  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.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Accordion__content {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Accordion__content {
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}
+.prokodo-Accordion__content[hidden] {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.prokodo-Accordion__content--is-expanded {
+  opacity: 1;
+  pointer-events: auto;
+}
+.prokodo-Accordion__actions {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  background-color: var(--color-grey-100);
+  border-top: 1px solid var(--color-grey-200);
+}