@ibobbyts/svelte-ui-utils 0.4.7 → 0.5.0

package/dist/style.css

@@ -217,96 +217,6 @@
   }
 }
 
-.suu-dropdown-search {
-  position: relative;
-  width: 100%;
-  font-family: var(--suu-font);
-}
-
-.suu-dropdown-search--multi {
-  display: grid;
-  gap: 8px;
-}
-
-.suu-dropdown-search__selected-items {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-}
-
-.suu-dropdown-search__selected-item {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 30px;
-  gap: 6px;
-  padding: 4px 6px 4px 10px;
-  border: 1px solid color-mix(in srgb, var(--suu-color-accent) 34%, var(--suu-color-border));
-  border-radius: var(--suu-radius-pill);
-  background: color-mix(in srgb, var(--suu-color-accent) 9%, var(--suu-color-bg));
-  color: var(--suu-color-text);
-  font-size: 0.875rem;
-}
-
-.suu-dropdown-search__selected-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.suu-dropdown-search__selected-remove {
-  display: inline-grid;
-  flex: 0 0 auto;
-  place-items: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: 0;
-  border-radius: var(--suu-radius-pill);
-  background: transparent;
-  color: var(--suu-color-muted);
-  cursor: pointer;
-}
-
-.suu-dropdown-search__selected-remove:hover,
-.suu-dropdown-search__selected-remove:focus-visible {
-  background: color-mix(in srgb, var(--suu-color-accent) 14%, transparent);
-  color: var(--suu-color-text);
-  outline: none;
-}
-
-.suu-dropdown-search__selected-remove svg {
-  width: 0.875rem;
-  height: 0.875rem;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-}
-
-.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;
@@ -317,196 +227,6 @@
   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: var(--suu-radius-pill);
-  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;
-  grid-template-columns: minmax(0, 1fr);
-  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--multi .suu-dropdown-search__option {
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  column-gap: 8px;
-}
-
-.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__option--selected {
-  background: color-mix(in srgb, var(--suu-color-accent) 8%, var(--suu-color-bg));
-}
-
-.suu-dropdown-search__footer {
-  border-top: 1px solid var(--suu-color-border);
-  padding: 9px 10px;
-  background: var(--suu-color-bg);
-  color: var(--suu-color-muted);
-  font-size: 0.875em;
-}
-
-.suu-dropdown-search__check {
-  display: inline-grid;
-  grid-row: 1 / span 2;
-  place-items: center;
-  width: 1rem;
-  height: 1rem;
-  border: 1px solid var(--suu-color-border-strong);
-  border-radius: var(--suu-radius-xs);
-  color: transparent;
-}
-
-.suu-dropdown-search__check svg {
-  width: 0.76rem;
-  height: 0.76rem;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.suu-dropdown-search__option--selected .suu-dropdown-search__check {
-  border-color: var(--suu-color-accent);
-  background: var(--suu-color-accent);
-  color: var(--suu-color-accent-text);
-}
-
-.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: var(--suu-radius-pill);
-  animation: suu-dropdown-spinner 700ms linear infinite;
-}
-
 .suu-data-table {
   display: grid;
   gap: 0;
@@ -1287,10 +1007,20 @@
 
 .suu-dropdown__menu--portal {
   position: fixed;
+  /* Must stay ahead of the top/left/right longhands below: an `inset` shorthand
+     declared after them would reset the menu placement variables. Also resets
+     the native popover UA styles (`inset: 0; margin: auto`). */
+  inset: auto;
   top: var(--suu-dropdown-menu-top);
   right: var(--suu-dropdown-menu-right, auto);
   left: var(--suu-dropdown-menu-left, auto);
+  bottom: auto;
   width: var(--suu-dropdown-menu-width, max-content);
+  /* Fixed positioning makes the base `min-width: 100%` resolve against the
+     viewport, which would stretch the menu to full width. */
+  min-width: 0;
+  margin: 0;
+  padding: 0;
   z-index: 1200;
 }
 
@@ -1309,11 +1039,11 @@
   bottom: calc(100% + 6px);
 }
 
-.suu-dropdown__menu--fit-content {
+.suu-dropdown__menu--fit-content:not(.suu-dropdown__menu--portal) {
   width: max-content;
 }
 
-.suu-dropdown__menu--fit-content .suu-dropdown__panel {
+.suu-dropdown__menu--fit-content:not(.suu-dropdown__menu--portal) .suu-dropdown__panel {
   min-width: max-content;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.4.7",
-  "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
+  "version": "0.5.0",
+  "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdowns, and data tables.",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -33,15 +33,6 @@
       "svelte": "./dist/dropdown/index.js",
       "default": "./dist/dropdown/index.js"
     },
-    "./dropdown-search": {
-      "types": "./dist/dropdown-search/index.d.ts",
-      "svelte": "./dist/dropdown-search/index.js",
-      "default": "./dist/dropdown-search/index.js"
-    },
-    "./dropdown-search/state": {
-      "types": "./dist/dropdown-search/state.d.ts",
-      "default": "./dist/dropdown-search/state.js"
-    },
     "./dialog": {
       "types": "./dist/dialog/index.d.ts",
       "svelte": "./dist/dialog/index.js",