@ibobbyts/svelte-ui-utils 0.1.2

package/dist/style.css

@@ -0,0 +1,1110 @@
+:root {
+  --suu-color-bg: #ffffff;
+  --suu-color-surface: #f9fafb;
+  --suu-color-text: #111827;
+  --suu-color-muted: #6b7280;
+  --suu-color-border: #d1d5db;
+  --suu-color-border-strong: #9ca3af;
+  --suu-color-accent: #2563eb;
+  --suu-color-accent-text: #ffffff;
+  --suu-color-success: #059669;
+  --suu-color-error: #dc2626;
+  --suu-color-warning: #d97706;
+  --suu-color-info: #2563eb;
+  --suu-shadow: 0 12px 30px rgb(15 23 42 / 0.14);
+  --suu-radius: 8px;
+  --suu-font: inherit;
+}
+
+[data-theme='dark'],
+.suu-theme-dark {
+  --suu-color-bg: #111827;
+  --suu-color-surface: #1f2937;
+  --suu-color-text: #f9fafb;
+  --suu-color-muted: #9ca3af;
+  --suu-color-border: #374151;
+  --suu-color-border-strong: #6b7280;
+  --suu-color-accent: #60a5fa;
+  --suu-color-accent-text: #111827;
+  --suu-color-success: #34d399;
+  --suu-color-error: #f87171;
+  --suu-color-warning: #fbbf24;
+  --suu-color-info: #60a5fa;
+  --suu-shadow: 0 16px 34px rgb(0 0 0 / 0.32);
+}
+
+.suu-toast-region {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  gap: 10px;
+  width: min(420px, calc(100vw - 32px));
+  pointer-events: none;
+}
+
+.suu-toast-region[data-stack='down'] {
+  flex-direction: column;
+}
+
+.suu-toast-region[data-stack='up'] {
+  flex-direction: column-reverse;
+}
+
+.suu-toast-region--top-left {
+  top: 16px;
+  left: 16px;
+}
+
+.suu-toast-region--top-center {
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.suu-toast-region--top-right {
+  top: 16px;
+  right: 16px;
+}
+
+.suu-toast-region--right-center {
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+}
+
+.suu-toast-region--bottom-right {
+  right: 16px;
+  bottom: 16px;
+}
+
+.suu-toast-region--bottom-center {
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.suu-toast-region--bottom-left {
+  bottom: 16px;
+  left: 16px;
+}
+
+.suu-toast-region--left-center {
+  top: 50%;
+  left: 16px;
+  transform: translateY(-50%);
+}
+
+.suu-toast {
+  position: relative;
+  display: grid;
+  grid-template-columns: 4px minmax(0, 1fr) auto;
+  overflow: hidden;
+  min-height: 64px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  box-shadow: var(--suu-shadow);
+  font-family: var(--suu-font);
+  pointer-events: auto;
+}
+
+.suu-toast__accent {
+  background: var(--suu-color-info);
+}
+
+.suu-toast--success .suu-toast__accent,
+.suu-toast--success .suu-toast__countdown {
+  background: var(--suu-color-success);
+}
+
+.suu-toast--error .suu-toast__accent,
+.suu-toast--error .suu-toast__countdown {
+  background: var(--suu-color-error);
+}
+
+.suu-toast--warning .suu-toast__accent,
+.suu-toast--warning .suu-toast__countdown {
+  background: var(--suu-color-warning);
+}
+
+.suu-toast--info .suu-toast__accent,
+.suu-toast--info .suu-toast__countdown,
+.suu-toast--custom .suu-toast__accent,
+.suu-toast--custom .suu-toast__countdown {
+  background: var(--suu-color-info);
+}
+
+.suu-toast__content {
+  min-width: 0;
+  padding: 12px 14px;
+}
+
+.suu-toast__title {
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.suu-toast__message {
+  margin-top: 2px;
+  color: var(--suu-color-muted);
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.suu-toast__close {
+  align-self: start;
+  margin: 8px 8px 0 0;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--suu-color-muted);
+  cursor: pointer;
+  font: inherit;
+}
+
+.suu-toast__close:hover,
+.suu-toast__close:focus-visible {
+  background: var(--suu-color-surface);
+  color: var(--suu-color-text);
+  outline: none;
+}
+
+.suu-toast__countdown {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  transform-origin: left center;
+  animation: suu-toast-countdown var(--suu-toast-duration) linear forwards;
+}
+
+@keyframes suu-toast-countdown {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes suu-dropdown-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.suu-dropdown-search {
+  position: relative;
+  width: 100%;
+  font-family: var(--suu-font);
+}
+
+.suu-dropdown-search__field {
+  position: relative;
+}
+
+.suu-dropdown-search__icon {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  z-index: 1;
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: none;
+  stroke: var(--suu-color-muted);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.suu-dropdown-search__input,
+.suu-pagination select {
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  font: inherit;
+}
+
+.suu-dropdown-search__input {
+  padding: 9px 14px 9px 44px;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) inset;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.suu-dropdown-search__input:focus {
+  border-color: var(--suu-color-accent);
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 22%, transparent);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--suu-color-accent) 16%, transparent);
+}
+
+.suu-dropdown-search--valid .suu-dropdown-search__input {
+  border-color: var(--suu-color-success);
+}
+
+.suu-dropdown-search--invalid .suu-dropdown-search__input,
+.suu-dropdown-search--error .suu-dropdown-search__input {
+  border-color: var(--suu-color-error);
+}
+
+.suu-dropdown-search--has-clear .suu-dropdown-search__input {
+  padding-right: 42px;
+}
+
+.suu-dropdown-search__clear {
+  position: absolute;
+  top: 50%;
+  right: 9px;
+  z-index: 2;
+  display: inline-grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--suu-color-muted);
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.suu-dropdown-search__clear:hover {
+  background: var(--suu-color-surface);
+  color: var(--suu-color-text);
+}
+
+.suu-dropdown-search__clear:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 35%, transparent);
+  outline-offset: 2px;
+}
+
+.suu-dropdown-search__clear svg {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.suu-dropdown-search__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  left: 0;
+  z-index: 100;
+  overflow: hidden;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  box-shadow: 0 18px 42px rgb(15 23 42 / 0.16);
+}
+
+.suu-dropdown-search__menu-panel {
+  max-height: 260px;
+  overflow-y: auto;
+  background: var(--suu-color-bg);
+  overscroll-behavior: contain;
+}
+
+.suu-dropdown-search__option {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  padding: 9px 10px;
+  border: 0;
+  border-bottom: 1px solid var(--suu-color-border);
+  background: transparent;
+  color: var(--suu-color-text);
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.suu-dropdown-search__option:last-child {
+  border-bottom: 0;
+}
+
+.suu-dropdown-search__option:hover,
+.suu-dropdown-search__option:focus-visible {
+  background: var(--suu-color-surface);
+  outline: none;
+}
+
+.suu-dropdown-search__option--disabled {
+  color: var(--suu-color-muted);
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.suu-dropdown-search__title {
+  font-weight: 650;
+}
+
+.suu-dropdown-search__meta,
+.suu-dropdown-search__empty {
+  color: var(--suu-color-muted);
+  font-size: 0.875rem;
+}
+
+.suu-dropdown-search__empty {
+  padding: 10px;
+}
+
+.suu-dropdown-search__empty--loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.suu-dropdown-search__spinner {
+  width: 0.875rem;
+  height: 0.875rem;
+  border: 2px solid color-mix(in srgb, var(--suu-color-muted) 28%, transparent);
+  border-top-color: var(--suu-color-accent);
+  border-radius: 999px;
+  animation: suu-dropdown-spinner 700ms linear infinite;
+}
+
+.suu-data-table {
+  display: grid;
+  gap: 0;
+  color: var(--suu-color-text);
+  font-family: var(--suu-font);
+}
+
+.suu-date-range-filter,
+.suu-number-range-filter {
+  display: grid;
+  gap: 10px;
+}
+
+.suu-date-range-filter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  min-width: 0;
+}
+
+.suu-number-range-filter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  min-width: 0;
+}
+
+.suu-range-field {
+  display: grid;
+  gap: 5px;
+  color: var(--suu-color-text);
+  font-size: 0.875rem;
+}
+
+.suu-date-range-filter .suu-range-field {
+  flex: 0 1 var(--suu-date-range-field-width, 11rem);
+  min-width: var(--suu-date-range-field-min-width, 9.5rem);
+}
+
+.suu-number-range-filter .suu-range-field {
+  flex: 0 1 var(--suu-number-range-field-width, 10rem);
+  min-width: var(--suu-number-range-field-min-width, 6rem);
+}
+
+.suu-range-field span {
+  color: var(--suu-color-muted);
+}
+
+.suu-range-field input {
+  min-height: 36px;
+  width: 100%;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  font: inherit;
+}
+
+.suu-range-field input {
+  padding: 7px 9px;
+}
+
+.suu-range-field input:focus {
+  border-color: var(--suu-color-accent);
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 22%, transparent);
+  outline-offset: 1px;
+}
+
+.suu-filter-preset-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.suu-date-range-filter .suu-filter-preset-row {
+  flex: 1 1 var(--suu-date-range-preset-width, 24rem);
+  align-self: flex-end;
+}
+
+.suu-filter-preset {
+  min-height: 30px;
+  padding: 5px 8px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+}
+
+.suu-filter-preset:hover,
+.suu-filter-preset:focus-visible,
+.suu-filter-preset--active {
+  border-color: var(--suu-color-accent);
+  outline: none;
+}
+
+.suu-filter-preset--active {
+  background: color-mix(in srgb, var(--suu-color-accent) 12%, var(--suu-color-bg));
+}
+
+.suu-input-affix {
+  display: flex;
+  align-items: stretch;
+}
+
+.suu-input-affix__label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 9px;
+  border: 1px solid var(--suu-color-border);
+  border-right: 0;
+  border-radius: var(--suu-radius) 0 0 var(--suu-radius);
+  background: var(--suu-color-surface);
+  color: var(--suu-color-muted);
+}
+
+.suu-input-affix input {
+  min-width: 0;
+}
+
+.suu-input-affix:has(.suu-input-affix__label) input {
+  border-radius: 0 var(--suu-radius) var(--suu-radius) 0;
+}
+
+.suu-filter-table {
+  display: grid;
+  gap: 12px;
+  color: var(--suu-color-text);
+  font-family: var(--suu-font);
+}
+
+.suu-filter-table__filters-wrap {
+  overflow: visible;
+  border: 1px solid var(--suu-color-border);
+  border-radius: calc(var(--suu-radius) + 4px);
+  background: var(--suu-color-bg);
+  box-shadow: 0 8px 10px rgb(15 23 42 / 0.08);
+}
+
+.suu-filter-table__filters {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: inherit;
+  background: var(--suu-color-bg);
+}
+
+.suu-filter-table__filters th,
+.suu-filter-table__filters td {
+  padding: 16px 20px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.suu-filter-table__filters tr + tr th,
+.suu-filter-table__filters tr + tr td {
+  border-top: 1px solid var(--suu-color-border);
+}
+
+.suu-filter-table__filters th {
+  position: relative;
+  width: 10rem;
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  font-weight: 700;
+  white-space: normal;
+}
+
+.suu-filter-table__filters th::after {
+  content: "";
+  position: absolute;
+  top: var(--suu-filter-table-divider-inset, 20px);
+  bottom: var(--suu-filter-table-divider-inset, 20px);
+  right: 0;
+  width: 1px;
+  background: var(--suu-color-border);
+}
+
+.suu-filter-table__filters tr:first-child th {
+  border-top-left-radius: calc(var(--suu-radius) + 3px);
+}
+
+.suu-filter-table__filters tr:first-child td {
+  border-top-right-radius: calc(var(--suu-radius) + 3px);
+}
+
+.suu-filter-table__filters tr:last-child th {
+  border-bottom-left-radius: calc(var(--suu-radius) + 3px);
+}
+
+.suu-filter-table__filters tr:last-child td {
+  border-bottom-right-radius: calc(var(--suu-radius) + 3px);
+}
+
+.suu-filter-table__filters td {
+  min-width: 0;
+}
+
+.suu-filter-table__control-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.suu-filter-table__control-main {
+  min-width: min(100%, 15rem);
+}
+
+.suu-filter-table__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  align-items: center;
+}
+
+.suu-filter-table__option {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 42px;
+  gap: 8px;
+  padding: 7px 10px 7px 12px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-muted);
+  cursor: pointer;
+  font-weight: 650;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    color 120ms ease,
+    background 120ms ease;
+}
+
+.suu-filter-table__option:hover {
+  border-color: var(--suu-color-border-strong);
+  color: var(--suu-color-text);
+}
+
+.suu-filter-table__option:has(.suu-filter-table__option-input:focus-visible) {
+  border-color: var(--suu-color-accent);
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 22%, transparent);
+  outline-offset: 1px;
+}
+
+.suu-filter-table__option--checked {
+  border-color: var(--suu-color-accent);
+  background: color-mix(in srgb, var(--suu-color-accent) 7%, var(--suu-color-bg));
+  color: var(--suu-color-accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--suu-color-accent) 20%, transparent);
+}
+
+.suu-filter-table__option-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.suu-filter-table__option-label {
+  line-height: 1.2;
+}
+
+.suu-filter-table__option-check {
+  display: inline-grid;
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
+  place-items: center;
+  border: 1px solid var(--suu-color-border-strong);
+  border-radius: 999px;
+  color: transparent;
+  transform: translateY(0.06em);
+}
+
+.suu-filter-table__option-check svg {
+  width: 0.72em;
+  height: 0.72em;
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 2.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.suu-filter-table__option--checked .suu-filter-table__option-check {
+  border-color: var(--suu-color-accent);
+  background: var(--suu-color-accent);
+  color: var(--suu-color-accent-text);
+}
+
+.suu-filter-table__option:has(.suu-filter-table__option-input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.suu-filter-table__controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.suu-filter-table__action,
+.suu-filter-table__select {
+  min-height: 38px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+}
+
+.suu-filter-table__action {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 12px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.suu-filter-table__action--primary {
+  border-color: var(--suu-color-accent);
+  background: var(--suu-color-accent);
+  color: #ffffff;
+}
+
+.suu-filter-table__action--secondary {
+  background: var(--suu-color-surface);
+}
+
+.suu-filter-table__action--ghost {
+  border-color: transparent;
+  background: transparent;
+}
+
+.suu-filter-table__action:focus-visible,
+.suu-filter-table__select:focus {
+  border-color: var(--suu-color-accent);
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 22%, transparent);
+  outline-offset: 1px;
+}
+
+.suu-filter-table__action-icon {
+  width: 1.1rem;
+  height: 1.1rem;
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.suu-filter-table__select {
+  padding: 7px 34px 7px 10px;
+}
+
+.suu-table-wrap {
+  overflow: auto;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+}
+
+.suu-table-wrap--borderless {
+  border: 0;
+  border-radius: 0;
+}
+
+.suu-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--suu-color-bg);
+}
+
+.suu-table--layout-auto {
+  table-layout: auto;
+}
+
+.suu-table--layout-fixed {
+  table-layout: fixed;
+}
+
+.suu-table th,
+.suu-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--suu-color-border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.suu-table--vertical-separators th:not(:first-child),
+.suu-table--vertical-separators td:not(:first-child) {
+  border-left: 1px solid var(--suu-color-border);
+}
+
+.suu-table th[data-nowrap='true'],
+.suu-table td[data-nowrap='true'] {
+  white-space: nowrap;
+}
+
+.suu-table th[data-align='center'],
+.suu-table td[data-align='center'] {
+  text-align: center;
+}
+
+.suu-table th[data-align='right'],
+.suu-table td[data-align='right'] {
+  text-align: right;
+}
+
+.suu-table thead th {
+  background: var(--suu-color-surface);
+  color: var(--suu-color-text);
+  font-weight: 700;
+}
+
+.suu-table--sticky-header thead th {
+  position: relative;
+  z-index: 1;
+}
+
+.suu-table--sticky-header-shadowed > thead {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.suu-table__sticky-offset-probe {
+  position: fixed;
+  top: var(--suu-table-sticky-top, 0px);
+  left: 0;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.suu-table__sticky-clone {
+  position: fixed;
+  top: var(--suu-table-sticky-top, 0px);
+  z-index: var(--suu-table-sticky-z-index, 30);
+  overflow: hidden;
+  pointer-events: none;
+  box-shadow: 0 1px 0 var(--suu-color-border);
+}
+
+.suu-table__sticky-clone .suu-table {
+  table-layout: fixed;
+}
+
+.suu-table__sticky-clone .suu-table__sort-button {
+  pointer-events: auto;
+}
+
+.suu-table--zebra tbody tr:nth-child(even) {
+  background: color-mix(in srgb, var(--suu-color-surface) 70%, transparent);
+}
+
+.suu-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.suu-table tbody tr:hover {
+  background: color-mix(in srgb, var(--suu-color-surface) 88%, transparent);
+}
+
+.suu-table__sort-button {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-weight: inherit;
+  text-align: inherit;
+}
+
+.suu-table__sort-button:focus-visible {
+  outline: 2px solid var(--suu-color-accent);
+  outline-offset: 2px;
+}
+
+.suu-table__sort-indicator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--suu-color-muted);
+  font-size: 0.75rem;
+}
+
+.suu-table__sort-icon {
+  display: block;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.suu-table__empty {
+  color: var(--suu-color-muted);
+  text-align: center;
+}
+
+.suu-pagination {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  width: 100%;
+  min-height: 58px;
+}
+
+.suu-pagination__size span {
+  color: var(--suu-color-muted);
+  font-size: 0.875rem;
+}
+
+.suu-pagination__pages,
+.suu-pagination__size {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+}
+
+.suu-pagination__pages {
+  grid-column: 2;
+  min-height: 34px;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.suu-pagination__pages--empty {
+  min-width: 1px;
+}
+
+.suu-pagination__page-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 6px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--suu-radius);
+  background: transparent;
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.suu-pagination__page-button:hover,
+.suu-pagination__page-button:focus-visible {
+  border-color: var(--suu-color-accent);
+  outline: none;
+}
+
+.suu-pagination__page-button--active {
+  border-color: var(--suu-color-accent);
+  background: var(--suu-color-accent);
+  color: var(--suu-color-accent-text);
+  box-shadow: var(--suu-shadow);
+}
+
+.suu-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  color: var(--suu-color-muted);
+  font-weight: 600;
+  line-height: 1;
+}
+
+.suu-pagination__size {
+  grid-column: 3;
+  align-self: center;
+  justify-self: end;
+  gap: 8px;
+  padding-right: 12px;
+}
+
+.suu-dropdown {
+  --suu-dropdown-space: 14px;
+
+  position: relative;
+  display: inline-flex;
+  color: var(--suu-color-text);
+}
+
+.suu-dropdown__button {
+  display: inline-flex;
+  gap: var(--suu-dropdown-space);
+  align-items: center;
+  justify-content: space-between;
+  height: 42px;
+  padding: 0 var(--suu-dropdown-space);
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+}
+
+.suu-dropdown__button:hover,
+.suu-dropdown__button:focus-visible {
+  border-color: var(--suu-color-accent);
+  outline: none;
+}
+
+.suu-dropdown__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.suu-dropdown__chevron {
+  width: 0.58em;
+  height: 0.58em;
+  border-right: 2px solid currentcolor;
+  border-bottom: 2px solid currentcolor;
+  transform: translateY(-20%) rotate(45deg);
+}
+
+.suu-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 100;
+  min-width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  box-shadow: 0 18px 42px rgb(15 23 42 / 0.16);
+}
+
+.suu-dropdown__menu--up {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+
+.suu-dropdown__panel {
+  max-height: 220px;
+  overflow-y: auto;
+  background: var(--suu-color-bg);
+  overscroll-behavior: contain;
+}
+
+.suu-dropdown__option {
+  display: block;
+  width: 100%;
+  padding: 9px 14px;
+  border: 0;
+  border-bottom: 1px solid var(--suu-color-border);
+  background: transparent;
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.suu-dropdown__option:last-child {
+  border-bottom: 0;
+}
+
+.suu-dropdown__option:hover,
+.suu-dropdown__option:focus-visible,
+.suu-dropdown__option--active {
+  background: var(--suu-color-surface);
+  outline: none;
+}
+
+.suu-dropdown__option[aria-selected='true'] {
+  color: var(--suu-color-accent);
+  font-weight: 700;
+}
+
+.suu-dropdown__option--disabled,
+.suu-dropdown__option:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+@media (max-width: 640px) {
+  .suu-pagination {
+    grid-template-columns: 1fr;
+  }
+
+  .suu-pagination__pages,
+  .suu-pagination__size {
+    grid-column: 1;
+    justify-self: center;
+  }
+}
+
+.suu-button {
+  min-height: 34px;
+  padding: 6px 10px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+}
+
+.suu-button:hover:not(:disabled),
+.suu-button:focus-visible {
+  border-color: var(--suu-color-accent);
+  outline: none;
+}
+
+.suu-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}