@prokodo/ui 0.1.12 → 0.1.13

package/dist/theme.css

@@ -287,6 +287,9 @@
   display: flex;
   flex-direction: column;
 }
+.prokodo-Accordion--panel {
+  gap: 0;
+}
 .prokodo-Accordion__item {
   border: 1px solid var(--color-grey-200);
   border-radius: 0.75rem;
@@ -298,6 +301,12 @@
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
 }
+.prokodo-Accordion__item--panel {
+  border-radius: 0;
+  margin-bottom: 0;
+  box-shadow: none;
+  border: none;
+}
 .prokodo-Accordion__header {
   display: flex;
   align-items: center;
@@ -358,6 +367,43 @@
   animation: none !important;
   box-shadow: var(--elevation-1);
 }
+.prokodo-Accordion__header__wrapper--panel {
+  position: relative;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white)));
+  border-radius: 0;
+}
+.prokodo-Accordion__header__wrapper--panel::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  background-size: 0% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  transition: background-size 0.35s ease;
+}
+.prokodo-Accordion__header__wrapper--panel:hover, .prokodo-Accordion__header__wrapper--panel:focus-visible {
+  animation: none;
+}
+.prokodo-Accordion__header__wrapper--panel:hover::after, .prokodo-Accordion__header__wrapper--panel:focus-visible::after {
+  background-size: 200% 100%;
+  animation: accordionBorderShift 2s linear;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded {
+  border-radius: 0;
+  box-shadow: none;
+  animation: none !important;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded::after {
+  background-size: 100% 100%;
+  background-position: 100% 0;
+  animation: none !important;
+}
 .prokodo-Accordion__title {
   width: calc(100% - 20px);
   margin: 0;
@@ -473,6 +519,197 @@ html[data-theme=dark] .prokodo-Accordion__icon {
   transition: opacity 1500ms ease-out, transform 500ms ease-out, visibility 1500ms ease-out;
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.prokodo-Autocomplete {
+  position: relative;
+}
+.prokodo-Autocomplete__inputWrap {
+  position: relative;
+  z-index: 41;
+  border-radius: 1.5rem;
+}
+.prokodo-Autocomplete__input {
+  width: 100%;
+}
+.prokodo-Autocomplete__input__inner--is-open, .prokodo-Autocomplete__input__node--is-open {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.prokodo-Autocomplete__input__inner--is-open {
+  background: var(--gradient-border-4);
+}
+.prokodo-Autocomplete__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% - 4px);
+  margin: 0;
+  padding: 0 2px 2px;
+  list-style: none;
+  transform: none;
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background: var(--gradient-border-4);
+  margin-top: -2px;
+  box-shadow: var(--elevation-3);
+  max-height: 260px;
+  overflow: auto;
+  z-index: 50;
+  animation: fade-in 180ms ease-out;
+  scrollbar-width: none;
+}
+.prokodo-Autocomplete__list::-webkit-scrollbar {
+  display: none;
+}
+.prokodo-Autocomplete__state {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.5rem 1rem 1rem 1rem;
+  background: var(--color-white);
+  color: var(--color-grey-700);
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  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-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Autocomplete__state {
+  background: rgb(16, 19, 27);
+  color: var(--color-grey-500);
+}
+.prokodo-Autocomplete__itemRow {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.prokodo-Autocomplete__itemRow--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item {
+  width: 100%;
+  border: none;
+  background: var(--color-white);
+  color: inherit;
+  text-align: left;
+  display: grid;
+  grid-gap: 0.25rem;
+  gap: 0.25rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+html[data-theme=dark] .prokodo-Autocomplete__item {
+  background: rgb(16, 19, 27);
+}
+.prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:focus-visible {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item--is-first {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Autocomplete__item--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+.prokodo-Autocomplete__itemLabel {
+  margin: 0;
+  color: var(--color-grey-900);
+  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-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Autocomplete__itemDescription {
+  margin: 0;
+  color: var(--color-grey-700);
+  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-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
 .prokodo-Avatar {
   position: relative;
   display: flex;
@@ -2289,8 +2526,8 @@ html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
   background: var(--gradient-border-8);
 }
 .prokodo-Input__input__node {
-  width: calc(100% - 1.5rem - 1.5rem - 0.25rem);
-  padding: 0.875rem 1.5rem;
+  width: calc(100% - 1rem - 1rem - 0.25rem);
+  padding: 0.875rem 1rem;
   margin: 2px;
   border: none;
   outline: none;
@@ -3665,7 +3902,6 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;
-  color: var(--color-grey-500);
 }
 .prokodo-RichText__li {
   display: flex;
@@ -5090,6 +5326,211 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   padding-bottom: 1rem;
 }
 
+.prokodo-Tabs {
+  width: 100%;
+}
+.prokodo-Tabs--vertical {
+  display: grid;
+  grid-gap: 1rem;
+  gap: 1rem;
+  grid-template-columns: minmax(px-to-rem(180px), px-to-rem(260px)) 1fr;
+}
+.prokodo-Tabs__list {
+  align-items: stretch;
+  border-bottom: 1px solid var(--color-grey-200);
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  padding: 0;
+  position: relative;
+  scrollbar-width: none;
+}
+html[data-theme=dark] .prokodo-Tabs__list {
+  border-bottom-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--vertical {
+  border-bottom: none;
+  border-right: 1px solid var(--color-grey-200);
+  flex-direction: column;
+  overflow-x: visible;
+}
+html[data-theme=dark] .prokodo-Tabs__list--vertical {
+  border-right-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--disabled {
+  opacity: 0.7;
+}
+.prokodo-Tabs__tab {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+  box-shadow: none;
+  color: var(--color-grey-700);
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.5rem;
+  justify-content: center;
+  min-height: px-to-rem(44px);
+  padding: 0.75rem 1rem;
+  position: relative;
+  transition: background-color 160ms ease, color 160ms ease, opacity 160ms 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.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__tab--vertical {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Tabs__tab:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab::after {
+  background: transparent;
+  bottom: 0;
+  content: "";
+  height: 3px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  transform: scaleX(0.35);
+  transform-origin: center;
+  transition: background-color 180ms ease, transform 180ms ease;
+}
+.prokodo-Tabs__tab--fullWidth {
+  flex: 1 1;
+}
+.prokodo-Tabs__tab--selected {
+  color: var(--color-primary-900);
+}
+.prokodo-Tabs__tab--selected::after {
+  background: var(--gradient-border-4);
+  transform: scaleX(1);
+}
+.prokodo-Tabs__tab--disabled {
+  color: var(--color-grey-500);
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+.prokodo-Tabs__tab--disabled:hover {
+  background: transparent;
+}
+.prokodo-Tabs__tab--disabled::after {
+  background: transparent;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab {
+  justify-content: flex-start;
+  text-align: left;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab::after {
+  bottom: 0;
+  height: auto;
+  left: 0;
+  right: auto;
+  top: 0;
+  transform: scaleY(0.35);
+  transform-origin: center;
+  width: 3px;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab--selected::after {
+  transform: scaleY(1);
+}
+.prokodo-Tabs__tabLabel {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-Tabs__badge {
+  align-items: center;
+  background: var(--color-grey-200);
+  border-radius: px-to-rem(999px);
+  color: var(--color-grey-700);
+  display: inline-flex;
+  justify-content: center;
+  min-width: px-to-rem(20px);
+  padding: 0 0.25rem;
+  font-size: px-to-rem(12px);
+  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-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__badgeChip {
+  pointer-events: none;
+  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-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Tabs__panel {
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 1rem;
+}
+.prokodo-Tabs__panel[hidden] {
+  display: none !important;
+}
+.prokodo-Tabs__panel:focus-visible {
+  outline: 0;
+  background: var(--gradient-border-4);
+}
+
 .prokodo-Teaser {
   overflow: hidden;
 }
@@ -5241,6 +5682,7 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 .prokodo-Tooltip__bubble--open {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 .prokodo-Tooltip__bubble::after {
   content: "";