@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/select/Select.module.css

@@ -125,8 +125,23 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-/* fade-in / out for the popup ------------------------------------------------ */
-@keyframes fade-in {
+@keyframes selectBorderShift {
+  from {
+    background-position: 0 0, 0 0, 0 0;
+  }
+  to {
+    background-position: 0 0, 200% 0, 0 0;
+  }
+}
+@keyframes selectNotchAnimate {
+  0%, 100% {
+    border-color: var(--pk-select-gradient-from);
+  }
+  50% {
+    border-color: var(--pk-select-gradient-to);
+  }
+}
+@keyframes selectFadeIn {
   from {
     opacity: 0;
   }
@@ -134,126 +149,165 @@
     opacity: 1;
   }
 }
-@keyframes fade-out {
+@keyframes selectSlideUp {
   from {
-    opacity: 1;
+    transform: translateY(100%);
+    opacity: 0.8;
   }
   to {
-    opacity: 0;
+    transform: translateY(0);
+    opacity: 1;
   }
 }
 .prokodo-Select {
   position: relative;
-  /* ───────────────── field (container for button + listbox) */
-  /* ───────────────── toggle button */
-  /* ───────────────── listbox (popup) */
-  /* ───────────────── option item */
-  /* ───────────────── checkbox for multi-select */
-  /* ───────────────── helper / error text */
+  display: flex;
+  flex-direction: column;
+}
+.prokodo-Select--primary {
+  --pk-select-shadow-color-focus: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
+  --pk-select-gradient-from: var(--pk-color-brand);
+  --pk-select-gradient-to: var(--pk-color-accent);
+  --pk-select-label-fg: var(--pk-color-brand);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-brand) 18%, var(--pk-select-bg));
+}
+.prokodo-Select--secondary {
+  --pk-select-shadow-color-focus: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+  --pk-select-gradient-from: var(--pk-color-accent);
+  --pk-select-gradient-to: var(--pk-color-brand);
+  --pk-select-label-fg: var(--pk-color-accent);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-accent) 18%, var(--pk-select-bg));
+}
+.prokodo-Select--success {
+  --pk-select-shadow-color-focus: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+  --pk-select-gradient-from: var(--pk-color-success);
+  --pk-select-gradient-to: #10CCB8;
+  --pk-select-label-fg: var(--pk-color-success);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-success) 18%, var(--pk-select-bg));
+}
+.prokodo-Select--warning {
+  --pk-select-shadow-color-focus: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+  --pk-select-gradient-from: var(--pk-color-warning);
+  --pk-select-gradient-to: #f7cc6a;
+  --pk-select-label-fg: var(--pk-color-warning);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-select-bg));
+}
+.prokodo-Select--error {
+  --pk-select-shadow-color-focus: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+  --pk-select-gradient-from: var(--pk-color-error);
+  --pk-select-gradient-to: #ff6b6b;
+  --pk-select-label-fg: var(--pk-color-error);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-error) 18%, var(--pk-select-bg));
+}
+.prokodo-Select--info, .prokodo-Select--inherit, .prokodo-Select--white {
+  --pk-select-shadow-color-focus: rgba(0, 0, 0, 0.1);
+  --pk-select-gradient-from: var(--pk-color-muted);
+  --pk-select-gradient-to: var(--pk-color-border);
+  --pk-select-label-fg: var(--pk-color-muted);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
+}
+html[data-theme="dark"] .prokodo-Select--info, [data-theme="dark"] .prokodo-Select--info, .pk-theme-dark .prokodo-Select--info, html[data-theme="dark"] .prokodo-Select--inherit, [data-theme="dark"] .prokodo-Select--inherit, .pk-theme-dark .prokodo-Select--inherit, html[data-theme="dark"] .prokodo-Select--white, [data-theme="dark"] .prokodo-Select--white, .pk-theme-dark .prokodo-Select--white {
+  --pk-select-gradient-from: var(--pk-palette-grey-100);
+  --pk-select-gradient-to: var(--pk-palette-grey-200);
+  --pk-select-label-fg: var(--pk-palette-grey-200);
+}
+html[data-theme="dark"] .prokodo-Select, [data-theme="dark"] .prokodo-Select, .pk-theme-dark .prokodo-Select {
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
+  --pk-select-fg-placeholder: var(--pk-palette-grey-400);
 }
 .prokodo-Select--fullWidth {
   width: 100%;
 }
 .prokodo-Select__label {
-  position: relative;
+  --pk-label-gradient-from: var(--pk-select-gradient-from);
+  --pk-label-gradient-to: var(--pk-select-gradient-to);
+  position: absolute;
+  left: var(--pk-select-padding-x);
+  top: 50%;
+  transform: translateY(-50%) scale(1);
   transform-origin: top left;
-  padding-bottom: 0.5rem;
+  transition: transform var(--pk-timing-normal) ease, color var(--pk-timing-normal) ease;
   font-size: 1rem;
-  color: var(--color-primary-500);
-  z-index: 1;
+  color: var(--pk-color-muted);
+  z-index: 2;
   pointer-events: none;
 }
-@media screen and (min-width: 960px) {
-  .prokodo-Select__label {
-    position: absolute;
-    left: 1.5rem;
-    top: 1.75rem;
-    padding: 0 0.25rem;
-    /* start centered vertically, at full size */
-    transform: translateY(-150%) scale(0.75);
-    background-color: var(--color-white);
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  html[data-theme=dark] .prokodo-Select__label {
-    background-color: rgb(16, 19, 27);
-  }
+.prokodo-Select__label--is-focused {
+  top: 0;
+  transform: translateY(-50%) scale(0.75);
+  color: var(--pk-select-label-fg);
 }
 .prokodo-Select__field {
   position: relative;
-  box-shadow: var(--elevation-1);
-  border-radius: 1.5rem;
-  /*   ‘expanded’ state is now driven by a class your JS toggles */
+  display: grid;
 }
-.prokodo-Select__field--expanded {
-  box-shadow: none;
-  z-index: 100;
+.prokodo-Select__field:hover .prokodo-Select__notch {
+  animation: selectNotchAnimate 2s linear infinite;
+  border-color: var(--pk-select-gradient-from);
 }
-.prokodo-Select__button {
+.prokodo-Select__field:has(.prokodo-Select__button--expanded) .prokodo-Select__notch {
+  animation: none;
+  border-color: var(--pk-select-label-fg);
+}
+.prokodo-Select__sizer {
+  grid-row: 1;
+  grid-column: 1;
+  visibility: hidden;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
   box-sizing: border-box;
-  width: calc(100% - 0.25rem + 4px);
-  padding: 0;
+  border: 2px solid transparent;
+  padding: 0 var(--pk-select-padding-x);
+  line-height: 1.5rem;
+  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;
-  cursor: pointer;
-  border: none;
-  color: var(--color-grey-900);
-  border-radius: 1.5rem;
-  position: relative;
-  background: var(--gradient-border-7);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: source-over;
-          mask-composite: add;
-  /* hover / focus */
-  /* open state — JS toggles .Select__button--expanded **and**
-     .Select__field--expanded plus aria-expanded="true"          */
-  /* caret / icon (if you still have one) */
-  /* inner text */
-}
-.prokodo-Select__button:hover {
-  background: var(--gradient-border-4);
-}
-.prokodo-Select__button:focus {
-  outline: 0;
-  background: var(--gradient-border-4);
+  text-decoration: none;
 }
-.prokodo-Select__button:disabled {
-  color: var(--color-grey-700);
-  cursor: default;
-  background: var(--gradient-border-8);
+@media screen and (min-width: 480px) {
+  .prokodo-Select__sizer {
+    font-size: 1rem;
+  }
 }
-.prokodo-Select__button:disabled:hover {
-  background: var(--gradient-border-8);
+@media screen and (min-width: 960px) {
+  .prokodo-Select__sizer {
+    font-size: 1rem;
+  }
 }
-.prokodo-Select__button--expanded {
-  border-top-left-radius: 1.6875rem;
-  border-top-right-radius: 1.6875rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  background: var(--gradient-border-4);
-}
-.prokodo-Select__button--expanded > .Select__button__inner {
-  border-top-left-radius: 1.5625rem;
-  border-top-right-radius: 1.5625rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.prokodo-Select__button > svg {
-  position: absolute;
-  top: 0;
-  right: 10px;
-  font-size: 1rem;
-  height: 100%;
+.prokodo-Select__sizer span {
+  display: block;
+  white-space: nowrap;
 }
-.prokodo-Select__button__inner {
-  display: flex;
-  align-items: center;
-  padding: 0.875rem 1rem;
-  margin: 2px;
-  background-color: var(--color-white);
-  border-radius: 1.5rem;
+.prokodo-Select__button {
+  grid-row: 1;
+  grid-column: 1;
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
+  line-height: 1.5rem;
+  padding: var(--pk-select-padding-y) var(--pk-select-padding-x);
+  border: none;
+  border-radius: var(--pk-select-radius);
+  background: var(--pk-select-bg);
+  box-shadow: 0 2px 8px var(--pk-select-shadow-color-focus), 0 1px 3px color-mix(in srgb, var(--pk-select-shadow-color-focus) 50%, transparent);
+  transition: box-shadow var(--pk-timing-normal) ease;
+  color: var(--pk-select-fg);
+  cursor: pointer;
+  text-align: left;
+  outline: none;
   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;
@@ -265,67 +319,91 @@
   text-decoration: none;
 }
 @media screen and (min-width: 480px) {
-  .prokodo-Select__button__inner {
+  .prokodo-Select__button {
     font-size: 1rem;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-Select__button__inner {
+  .prokodo-Select__button {
     font-size: 1rem;
   }
 }
-html[data-theme=dark] .prokodo-Select__button__inner {
-  background-color: rgb(16, 19, 27);
+.prokodo-Select__button:hover {
+  box-shadow: 0 4px 12px var(--pk-select-shadow-color-focus), 0 0 5px var(--pk-select-shadow-color-focus);
+}
+.prokodo-Select__button--expanded {
+  border-radius: var(--pk-select-radius) var(--pk-select-radius) 0 0;
+  box-shadow: 0 8px 16px var(--pk-select-shadow-color-focus), 0 2px 6px color-mix(in srgb, var(--pk-select-shadow-color-focus) 80%, transparent);
+}
+.prokodo-Select__button:disabled {
+  cursor: not-allowed;
+  color: var(--pk-select-fg-muted);
+  background: var(--pk-select-bg);
+}
+.prokodo-Select__notch {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0 calc(var(--pk-select-padding-x) - 0.25em);
+  border: 2px solid var(--pk-color-border);
+  border-radius: var(--pk-select-radius);
+  pointer-events: none;
+  z-index: 1;
+  background: transparent;
+  transition: border-color var(--pk-timing-normal) ease;
+}
+.prokodo-Select__notch legend {
+  display: block;
+  height: 0;
+  font-size: 0.75rem;
+  visibility: hidden;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  max-width: 0.01px;
+  transition: max-width var(--pk-timing-normal) ease;
+}
+.prokodo-Select__notch legend span {
+  padding: 0 0.5em;
+  display: inline-block;
+}
+.prokodo-Select__notch--is-focused {
+  border-color: var(--pk-select-label-fg);
+}
+.prokodo-Select__notch--is-focused legend {
+  max-width: 100%;
+}
+.prokodo-Select__notch--expanded {
+  border-radius: var(--pk-select-radius) var(--pk-select-radius) 0 0;
 }
 .prokodo-Select__button__inner {
-  font-size: 1rem;
+  flex: 1 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.prokodo-Select__button__inner--expanded {
-  border-top-left-radius: 1.5625rem;
-  border-top-right-radius: 1.5625rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+.prokodo-Select__button__inner--is-hidden {
+  visibility: hidden;
 }
 .prokodo-Select__button__inner--is-placeholder {
-  color: var(--color-grey-500);
+  color: var(--pk-select-fg-placeholder);
 }
 .prokodo-Select__button__inner--is-placeholder--disabled {
-  color: var(--color-grey-500);
+  color: var(--pk-select-fg-placeholder);
+  opacity: 0.5;
 }
 .prokodo-Select__listbox {
   box-sizing: border-box;
-  padding: 2px;
-  margin: -2px 0 0 0;
-  overflow: auto;
-  outline: 0;
-  max-height: 225px;
-  width: 100%;
-  color: var(--color-grey-900);
-  border-bottom-left-radius: 1.5625rem;
-  border-bottom-right-radius: 1.5625rem;
-  background: var(--gradient-border-4);
-  box-shadow: var(--elevation-3);
-  scrollbar-width: none;
-  z-index: 2147483647;
-  /* animation – your JS toggles .is-open / .is-closed */
-}
-.prokodo-Select__listbox--is-open {
-  animation: fade-in 200ms ease-out forwards;
-}
-.prokodo-Select__listbox--is-closed {
-  animation: fade-out 200ms ease-in forwards;
-}
-.prokodo-Select__item {
+  background: linear-gradient(var(--pk-select-bg), var(--pk-select-bg)) padding-box, linear-gradient(90deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to), var(--pk-select-gradient-from)) border-box;
+  border: 2px solid transparent;
+  border-top: none;
+  border-radius: 0 0 var(--pk-select-radius) var(--pk-select-radius);
+  box-shadow: var(--pk-select-listbox-shadow);
+  overflow-y: auto;
+  max-height: 260px;
   list-style: none;
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  cursor: pointer;
-  background: var(--color-white);
-  position: relative;
-  backface-visibility: hidden;
-  margin-top: -2px;
-  perspective: 1000px;
+  margin: -2px 0 0 0;
+  padding: 0;
   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;
@@ -335,111 +413,121 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   text-transform: none;
   text-align: left;
   text-decoration: none;
-  /* hover / focus */
-  /* selected */
-  /* keyboard "active" option (aria-activedescendant) */
-  /* if both selected + active, keep it clearly active */
-  /* disabled (if you add aria-disabled) */
 }
 @media screen and (min-width: 480px) {
-  .prokodo-Select__item {
+  .prokodo-Select__listbox {
     font-size: 1rem;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-Select__item {
+  .prokodo-Select__listbox {
     font-size: 1rem;
   }
 }
-html[data-theme=dark] .prokodo-Select__item {
-  background: rgb(16, 19, 27);
+.prokodo-Select__listbox--primary {
+  --pk-select-gradient-from: var(--pk-color-brand);
+  --pk-select-gradient-to: var(--pk-color-accent);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-brand) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__listbox--secondary {
+  --pk-select-gradient-from: var(--pk-color-accent);
+  --pk-select-gradient-to: var(--pk-color-brand);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-accent) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__listbox--success {
+  --pk-select-gradient-from: var(--pk-color-success);
+  --pk-select-gradient-to: #10CCB8;
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-success) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__listbox--warning {
+  --pk-select-gradient-from: var(--pk-color-warning);
+  --pk-select-gradient-to: #f7cc6a;
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__listbox--error {
+  --pk-select-gradient-from: var(--pk-color-error);
+  --pk-select-gradient-to: #ff6b6b;
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-error) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__listbox--info, .prokodo-Select__listbox--inherit, .prokodo-Select__listbox--white {
+  --pk-select-gradient-from: var(--pk-color-muted);
+  --pk-select-gradient-to: var(--pk-color-border);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
+}
+html[data-theme="dark"] .prokodo-Select__listbox, [data-theme="dark"] .prokodo-Select__listbox, .pk-theme-dark .prokodo-Select__listbox {
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
+  --pk-select-fg: var(--pk-color-fg);
+  --pk-select-bg: var(--pk-color-surface);
 }
-.prokodo-Select__item {
-  font-size: 1rem;
+.prokodo-Select__listbox--is-closed {
+  display: none;
 }
-.prokodo-Select__item:last-child {
-  border-bottom-left-radius: 1.5625rem;
-  border-bottom-right-radius: 1.5625rem;
+.prokodo-Select__item {
+  display: flex;
+  align-items: center;
+  gap: var(--pk-space-sm);
+  padding: var(--pk-select-item-padding-y) var(--pk-select-item-padding-x);
+  cursor: pointer;
+  color: var(--pk-select-fg);
+  list-style: none;
+  transition: background-color var(--pk-timing-fast) ease;
 }
 .prokodo-Select__item:hover {
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Select__item:hover {
-  background: var(--color-primary-50);
-}
-.prokodo-Select__item:focus-visible {
-  outline: 0;
-  background: var(--color-primary-50);
-}
-html[data-theme=dark] .prokodo-Select__item:focus-visible {
-  background: var(--color-primary-50);
-}
-.prokodo-Select__item--selected {
-  background: var(--color-primary-100);
-}
-html[data-theme=dark] .prokodo-Select__item--selected {
-  background: var(--color-primary-100);
+  background-color: var(--pk-select-item-hover-bg);
 }
 .prokodo-Select__item--active {
-  background: var(--color-primary-100);
-}
-html[data-theme=dark] .prokodo-Select__item--active {
-  background: var(--color-primary-100);
-}
-.prokodo-Select__item--selected--active {
-  background: var(--color-primary-100);
-}
-html[data-theme=dark] .prokodo-Select__item--selected--active {
-  background: var(--color-primary-100);
+  background-color: var(--pk-select-item-hover-bg);
 }
-.prokodo-Select__item[aria-disabled=true] {
-  color: var(--color-grey-400);
-  cursor: not-allowed;
+.prokodo-Select__item--selected {
+  background-color: var(--pk-select-item-active-bg);
 }
 .prokodo-Select__checkbox {
-  position: relative;
-  min-width: 18px;
-  min-height: 18px;
-  margin-right: 0.75rem;
-  transform: scale(1.2);
-  cursor: pointer;
-  border: none;
-  border-radius: 5px;
-  -webkit-appearance: none;
+  flex-shrink: 0;
+  pointer-events: none;
   -moz-appearance: none;
        appearance: none;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: source-over;
-          mask-composite: add;
-  background: var(--gradient-border-7);
+  -webkit-appearance: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 4px;
+  background: var(--pk-color-surface, #fff);
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pk-select-gradient-from) 30%, transparent), inset 0 2px 6px color-mix(in srgb, var(--pk-select-gradient-from) 20%, transparent);
+  transition: background var(--pk-timing-fast) ease, box-shadow var(--pk-timing-fast) ease;
+  position: relative;
 }
-.prokodo-Select__checkbox:before { /* white inner square */
+.prokodo-Select__checkbox::after {
   content: "";
+  display: block;
   position: absolute;
-  inset: 2px;
-  background: var(--color-white);
-}
-html[data-theme=dark] .prokodo-Select__checkbox:before {
-  background-color: rgb(16, 19, 27);
-}
-.prokodo-Select__checkbox--checked { /* gradient + tick mark */
-  background: var(--gradient-border-4);
+  top: 50%;
+  left: 50%;
+  width: 5px;
+  height: 9px;
+  border: 2px solid transparent;
+  border-top-width: 0;
+  border-left-width: 0;
+  transform: translate(-50%, -60%) rotate(45deg);
+  opacity: 0;
+  transition: opacity var(--pk-timing-fast) ease, border-color var(--pk-timing-fast) ease;
+}
+.prokodo-Select__checkbox--checked {
+  background: linear-gradient(135deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--pk-select-gradient-from) 40%, transparent);
 }
 .prokodo-Select__checkbox--checked::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: var(--gradient-background-primary-grey-secondary);
-  -webkit-mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
-  mask: url('data:image/svg+xml;utf8,          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"                stroke-width="1.5" fill="none" stroke-linecap="round"                stroke-linejoin="round"><path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7"                stroke="black"/></svg>') no-repeat center/contain;
+  border-color: #ffffff;
+  opacity: 1;
 }
 .prokodo-Select__helperText {
-  padding-left: 1.5rem;
-  padding-top: 0.75rem;
-  display: flex;
-  color: var(--color-grey-300);
-  width: 80%;
+  padding-top: var(--pk-space-xs);
+  color: var(--pk-select-helper-fg);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -462,12 +550,245 @@ html[data-theme=dark] .prokodo-Select__checkbox:before {
     line-height: 1.4;
   }
 }
-html[data-theme=dark] .prokodo-Select__helperText {
-  color: var(--color-grey-700);
+.prokodo-Select__helperText__content--is-error {
+  color: var(--pk-color-error);
+}
+.prokodo-Select__sheet__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 199;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  animation: selectFadeIn 200ms ease both;
+}
+.prokodo-Select__sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 200;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-height: 80dvh;
+  background: var(--pk-select-bg);
+  border-radius: 1.25rem 1.25rem 0 0;
+  border: 1px solid color-mix(in srgb, var(--pk-select-gradient-from) 30%, transparent);
+  border-bottom: none;
+  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18), 0 -2px 0 color-mix(in srgb, var(--pk-select-gradient-from) 50%, transparent);
+  padding: 0 1.25rem 2rem;
+  overflow: hidden;
+  animation: selectSlideUp 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+.prokodo-Select__sheet--primary {
+  --pk-select-gradient-from: var(--pk-color-brand);
+  --pk-select-gradient-to: var(--pk-color-accent);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-brand) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__sheet--secondary {
+  --pk-select-gradient-from: var(--pk-color-accent);
+  --pk-select-gradient-to: var(--pk-color-brand);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-accent) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__sheet--success {
+  --pk-select-gradient-from: var(--pk-color-success);
+  --pk-select-gradient-to: #10CCB8;
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-success) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__sheet--warning {
+  --pk-select-gradient-from: var(--pk-color-warning);
+  --pk-select-gradient-to: #f7cc6a;
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-warning) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__sheet--error {
+  --pk-select-gradient-from: var(--pk-color-error);
+  --pk-select-gradient-to: #ff6b6b;
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-error) 18%, var(--pk-select-bg));
+}
+.prokodo-Select__sheet--info, .prokodo-Select__sheet--inherit, .prokodo-Select__sheet--white {
+  --pk-select-gradient-from: var(--pk-color-muted);
+  --pk-select-gradient-to: var(--pk-color-border);
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-color-muted) 10%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-color-muted) 18%, var(--pk-select-bg));
+}
+html[data-theme="dark"] .prokodo-Select__sheet, [data-theme="dark"] .prokodo-Select__sheet, .pk-theme-dark .prokodo-Select__sheet {
+  --pk-select-item-hover-bg: color-mix(in srgb, var(--pk-select-gradient-from) 15%, var(--pk-select-bg));
+  --pk-select-item-active-bg: color-mix(in srgb, var(--pk-select-gradient-from) 25%, var(--pk-select-bg));
+  --pk-select-fg: var(--pk-color-fg);
+  --pk-select-bg: var(--pk-color-surface);
+}
+.prokodo-Select__sheet::before {
+  content: "";
+  display: block;
+  width: 2.5rem;
+  height: 0.25rem;
+  background: var(--pk-color-brand);
+  border-radius: 999px;
+  margin: 0.75rem auto 1rem;
+  flex-shrink: 0;
+}
+.prokodo-Select__sheet--secondary::before {
+  background: var(--pk-color-accent);
+}
+.prokodo-Select__sheet--success::before {
+  background: var(--pk-color-success);
+}
+.prokodo-Select__sheet--warning::before {
+  background: var(--pk-color-warning);
+}
+.prokodo-Select__sheet--error::before {
+  background: var(--pk-color-error);
+}
+.prokodo-Select__sheet--info::before, .prokodo-Select__sheet--inherit::before, .prokodo-Select__sheet--white::before {
+  background: var(--pk-color-muted);
+}
+.prokodo-Select__sheet__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 0.25rem 0.75rem;
+  flex-shrink: 0;
+}
+.prokodo-Select__sheet__title {
+  font-weight: 700;
+  color: var(--pk-select-fg);
+  font-weight: 500;
+  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-Select__sheet__title {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__sheet__title {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-Select__sheet__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 100%;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--pk-select-fg);
+  flex-shrink: 0;
+  transition: background var(--pk-timing-fast) ease, color var(--pk-timing-fast) ease;
+}
+.prokodo-Select__sheet__close:hover {
+  background: color-mix(in srgb, var(--pk-select-gradient-from) 12%, transparent);
+  color: var(--pk-select-gradient-from);
+}
+.prokodo-Select__sheet__list {
+  flex: 1 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  list-style: none;
+  margin: 0;
+  padding: var(--pk-space-xs, 0.25rem) 0;
+}
+.prokodo-Select__sheet__item {
+  display: flex;
+  align-items: center;
+  gap: var(--pk-space-sm);
+  padding: 0.875rem 0.75rem;
+  border-radius: var(--pk-select-radius, 8px);
+  cursor: pointer;
+  color: var(--pk-select-fg);
+  min-height: 2.75rem;
+  transition: background-color var(--pk-timing-fast) 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-Select__sheet__item {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__sheet__item {
+    font-size: 1rem;
+  }
+}
+.prokodo-Select__sheet__item:hover {
+  background-color: var(--pk-select-item-hover-bg);
+}
+.prokodo-Select__sheet__item--active {
+  background-color: var(--pk-select-item-hover-bg);
 }
-.prokodo-Select__helperText__content {
+.prokodo-Select__sheet__item--selected {
+  background-color: color-mix(in srgb, var(--pk-select-gradient-from) 10%, transparent);
+  font-weight: 600;
+  color: var(--pk-select-gradient-from);
+}
+.prokodo-Select__sheet__item--selected::after {
+  content: "✓";
+  margin-left: auto;
+  font-weight: 700;
+}
+.prokodo-Select__sheet__footer {
+  padding-top: var(--pk-space-sm, 0.5rem);
+  flex-shrink: 0;
+}
+.prokodo-Select__sheet__done {
   width: 100%;
+  padding: 0.75rem;
+  border-radius: var(--pk-select-radius, 8px);
+  border: none;
+  cursor: pointer;
+  font-weight: 700;
+  background: linear-gradient(90deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
+  color: #fff;
+  transition: opacity var(--pk-timing-fast) ease;
+  font-weight: 700;
+  font-size: 1.75rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.6;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
 }
-.prokodo-Select__helperText__content--is-error {
-  color: var(--color-error);
+@media screen and (min-width: 480px) {
+  .prokodo-Select__sheet__done {
+    font-size: 1.5rem;
+    line-height: 1.55;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__sheet__done {
+    font-size: 1.5rem;
+    line-height: 1.55;
+  }
+}
+.prokodo-Select__sheet__done:hover {
+  opacity: 0.9;
 }