@prokodo/ui 0.1.2 → 0.1.3

package/dist/ui.css

@@ -144,8 +144,34 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
+  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;
@@ -157,14 +183,14 @@
   background-repeat: no-repeat;
   transition: color 0.3s ease, background-size 0.35s ease;
 }
-.prokodo-Accordion__header:hover, .prokodo-Accordion__header:focus-visible {
+.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--is-expanded {
+.prokodo-Accordion__header__wrapper--is-expanded {
   position: relative;
   z-index: 2;
   /* keep border visible and settled */
@@ -6111,7 +6137,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
   text-transform: none;
   text-align: left;
   text-decoration: none;
-  font-weight: 500;
 }
 @media screen and (min-width: 480px) {
   .prokodo-List__item {
@@ -6125,6 +6150,9 @@ html[data-theme=dark] .prokodo-Select__helperText {
     line-height: 1.5;
   }
 }
+.prokodo-List__item {
+  font-weight: 500;
+}
 .prokodo-List__item--has-icon {
   flex-wrap: nowrap;
 }
@@ -6199,7 +6227,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-transform: none;
   text-align: left;
   text-decoration: none;
-  font-weight: 500;
 }
 @media screen and (min-width: 480px) {
   .prokodo-List__item__title--card {
@@ -6213,6 +6240,9 @@ html[data-theme=dark] .prokodo-List__item__icon {
     line-height: 1.5;
   }
 }
+.prokodo-List__item__title--card {
+  font-weight: 500;
+}
 .prokodo-List__item__content {
   width: calc(100% - 2rem);
 }
@@ -6268,7 +6298,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-transform: none;
   text-align: left;
   text-decoration: none;
-  font-weight: 500;
 }
 @media screen and (min-width: 480px) {
   .prokodo-List__item--is-clickable a {
@@ -6282,6 +6311,9 @@ html[data-theme=dark] .prokodo-List__item__icon {
     line-height: 1.5;
   }
 }
+.prokodo-List__item--is-clickable a {
+  font-weight: 500;
+}
 .prokodo-List__item--is-clickable:hover span[role=presentation] {
   color: var(--color-primary-500);
 }
@@ -8438,6 +8470,252 @@ html[data-theme=dark] .prokodo-List__item__icon {
     font-size: 1rem;
     line-height: 1.45;
   }
+}/* 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.
+ */
+.prokodo-Rating {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.prokodo-Rating--full-width {
+  width: 100%;
+}
+.prokodo-Rating__inner {
+  position: relative;
+}
+.prokodo-Rating__label {
+  padding-bottom: 0.5rem;
+  color: var(--color-grey-600);
+  z-index: 1;
+  pointer-events: none;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Rating__label {
+    font-size: 1.125rem;
+    padding: 0;
+  }
+}
+.prokodo-Rating__field {
+  position: relative;
+}
+.prokodo-Rating__group {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 0;
+}
+.prokodo-Rating__icon {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-grey-300);
+  transition: transform 0.1s ease, color 0.15s ease;
+}
+.prokodo-Rating__icon__symbol {
+  display: inline-block;
+}
+.prokodo-Rating__icon__sr-only {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-Rating__icon--filled {
+  color: var(--color-primary-500);
+}
+.prokodo-Rating__icon--selected {
+  transform: scale(1.05);
+}
+.prokodo-Rating__icon--disabled {
+  cursor: not-allowed;
+  color: var(--color-grey-200);
+}
+.prokodo-Rating__icon--readonly {
+  cursor: default;
+}
+.prokodo-Rating__icon:hover {
+  transform: scale(1.05);
+}
+.prokodo-Rating__icon:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+  border-radius: 999px;
+}
+.prokodo-Rating__footer {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  padding-top: 0.5rem;
+}
+.prokodo-Rating__helperText {
+  width: 100%;
+  padding-top: 0.75rem;
+  display: flex;
+  color: var(--color-grey-300);
+  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;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Rating__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Rating__helperText {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Rating__helperText {
+  color: var(--color-grey-700);
+}
+.prokodo-Rating__helperText__content {
+  width: 100%;
+}
+.prokodo-Rating__helperText__content--is-error {
+  color: var(--color-error);
 }
 /* stylelint-disable */
 /**
@@ -8704,6 +8982,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
   border-radius: 13px;
 }
 .prokodo-SideNav__label {
+  animation: label-in 150ms ease forwards;
   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;
@@ -8713,7 +8992,6 @@ html[data-theme=dark] .prokodo-List__item__icon {
   text-transform: none;
   text-align: left;
   text-decoration: none;
-  animation: label-in 150ms ease forwards;
 }
 @media screen and (min-width: 480px) {
   .prokodo-SideNav__label {
@@ -8876,6 +9154,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
 }
 .prokodo-Snackbar--warning {
   background-color: var(--color-warning);
+  color: var(--color-black);
 }
 .prokodo-Snackbar--info {
   background-color: var(--color-info);
@@ -8910,44 +9189,37 @@ html[data-theme=dark] .prokodo-List__item__icon {
 }
 
 .prokodo-SnackbarProvider {
-  position: "fixed";
-  display: "flex";
-  flex-direction: "column";
+  position: absolute;
+  display: flex;
+  flex-direction: column;
   gap: 8;
   z-index: 9000;
-  pointer-events: "none";
+  pointer-events: none;
 }
 .prokodo-SnackbarProvider--is-top {
-  inset-block-start: 16px;
-  inset-block-end: auto;
+  top: 0;
 }
 .prokodo-SnackbarProvider--is-bottom {
-  inset-block-start: auto;
-  inset-block-end: 16px;
+  bottom: 0;
+}
+.prokodo-SnackbarProvider--is-center {
+  left: 50%;
+  transform: translateX(-50%);
 }
 .prokodo-SnackbarProvider--is-left {
-  inset-inline-start: 16px;
-  inset-inline-end: auto;
+  left: 1rem;
 }
 .prokodo-SnackbarProvider--is-right {
-  inset-inline-start: auto;
-  inset-inline-end: 16px;
+  right: 1rem;
 }
 .prokodo-SnackbarProvider__snackbar {
   pointer-events: auto;
-  margin: 0 0 1rem 0;
 }
 .prokodo-SnackbarProvider__snackbar--is-top {
   margin-top: 1rem;
 }
 .prokodo-SnackbarProvider__snackbar--is-bottom {
   margin-bottom: 1rem;
-}
-.prokodo-SnackbarProvider__snackbar--is-left {
-  margin-left: 1rem;
-}
-.prokodo-SnackbarProvider__snackbar--is-right {
-  margin-right: 1rem;
 }/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prokodo/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.",
   "sideEffects": false,
@@ -160,6 +160,10 @@
       "import": "./dist/components/quote/index.js",
       "types": "./dist/types/components/quote/index.d.ts"
     },
+    "./rating": {
+      "import": "./dist/components/rating/index.js",
+      "types": "./dist/types/components/rating/index.d.ts"
+    },
     "./rich-text": {
       "import": "./dist/components/rich-text/index.js",
       "types": "./dist/types/components/rich-text/index.d.ts"