@keenmate/web-multiselect 1.0.0-rc02

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@keenmate/web-multiselect",
+  "version": "1.0.0-rc02",
+  "description": "Lightweight multiselect web component with typeahead search, rich content support, and excellent keyboard navigation",
+  "type": "module",
+  "main": "./dist/multiselect.umd.js",
+  "module": "./dist/multiselect.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/multiselect.js",
+      "require": "./dist/multiselect.umd.js",
+      "default": "./dist/multiselect.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./scss": "./src/scss/_multiselect.scss",
+    "./dist/*": "./dist/*",
+    "./src/scss/*": "./src/scss/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/multiselect.js",
+    "./dist/multiselect.umd.js",
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src/scss"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run clean:dist && tsc && vite build",
+    "build:types": "tsc",
+    "build:full": "npm run build",
+    "preview": "vite preview",
+    "package": "npm run build && npm pack",
+    "publish:dry": "npm run build && npm publish --dry-run",
+    "clean": "rimraf dist *.tgz",
+    "clean:dist": "rimraf dist"
+  },
+  "keywords": [
+    "multiselect",
+    "multi-select",
+    "select",
+    "dropdown",
+    "typeahead",
+    "autocomplete",
+    "web-component",
+    "custom-element",
+    "search",
+    "filter",
+    "keenmate"
+  ],
+  "author": "Keenmate",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/keenmate/web-multiselect.git"
+  },
+  "homepage": "https://github.com/keenmate/web-multiselect#readme",
+  "bugs": {
+    "url": "https://github.com/keenmate/web-multiselect/issues"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5",
+    "sass-embedded": "^1.93.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.5.3"
+  }
+}

package/src/scss/_base.scss

@@ -0,0 +1,41 @@
+// ==============================================================================
+// BASE STYLES
+// ==============================================================================
+// Foundation styles: FOUC prevention and layout containers
+
+@use 'variables' as *;
+
+// ==============================================================================
+// FOUC PREVENTION
+// ==============================================================================
+// Prevent Flash of Unstyled Content by hiding undefined custom elements
+// Keep element visible to prevent layout shift, but hide any text content
+multi-select:not(:defined) {
+  display: block;
+  min-height: 2.5rem;
+  color: transparent !important;
+  background: transparent;
+}
+
+// ==============================================================================
+// LAYOUT CONTAINERS
+// ==============================================================================
+
+// Wrapper (contains multiselect + pills)
+.ml-wrapper {
+  display: flex;
+  flex-direction: column; // Default: pills above/below input
+  align-items: stretch;
+
+  // Inline layout for left/right positioning
+  &--inline {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+
+// Main container
+.ml {
+  position: relative;
+  width: 100%;
+}

package/src/scss/_debug.scss

@@ -0,0 +1,60 @@
+// ==============================================================================
+// DEBUG INFO PANEL
+// ==============================================================================
+// Debug information display for development and troubleshooting
+
+@use 'variables' as *;
+
+.ml-debug-info {
+    margin-top: $ml-spacing-xs;
+    padding: $ml-spacing-xs;
+    background-color: $ml-color-neutral-lightest;
+    border: 1px solid $ml-color-neutral-light;
+    border-radius: $ml-border-radius;
+    font-size: $ml-font-size-xs;
+    color: $ml-color-neutral-darkest;
+
+    details {
+        summary {
+            cursor: pointer;
+            font-weight: $ml-font-weight-semibold;
+            color: $ml-color-accent-dark;
+            user-select: none;
+            padding: $ml-spacing-xs;
+            border-radius: $ml-border-radius-sm;
+
+            &:hover {
+                background-color: $ml-color-neutral-lighter;
+            }
+
+            &:focus {
+                outline: 2px solid $ml-color-accent-base;
+                outline-offset: 2px;
+            }
+        }
+    }
+
+    .ml-debug-stats {
+        display: flex;
+        flex-direction: column;
+        gap: $ml-spacing-xs;
+        margin-top: $ml-spacing-xs;
+        padding: $ml-spacing-xs;
+        background-color: $ml-color-white;
+        border-radius: $ml-border-radius-sm;
+
+        span {
+            display: flex;
+            justify-content: space-between;
+            padding: 2px 4px;
+            font-family: monospace;
+            font-size: $ml-font-size-2xs;
+
+            &::before {
+                content: '•';
+                margin-right: $ml-spacing-xs;
+                color: $ml-color-accent-base;
+            }
+        }
+    }
+}

package/src/scss/_input-dropdown.scss

@@ -0,0 +1,177 @@
+// ==============================================================================
+// INPUT & DROPDOWN COMPONENTS
+// ==============================================================================
+// Input field, toggle icon, count badge, floating hint, dropdown container, and actions
+
+@use 'variables' as *;
+
+// ==============================================================================
+// INPUT COMPONENT
+// ==============================================================================
+
+// Input wrapper
+.ml__input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+// Search input
+.ml__input {
+  width: 100%;
+  padding: var(--ml-input-padding, $ml-input-padding);
+  padding-right: var(--ml-input-padding-right, $ml-input-padding-right); // Space for dropdown icon
+  font-size: var(--ml-input-font-size, $ml-input-font-size);
+  border: var(--ml-input-border-style, $ml-input-border-style);
+  border-radius: var(--ml-input-border-radius, $ml-input-border-radius);
+  background: var(--ml-input-bg, $ml-input-bg);
+  color: var(--ml-input-text, $ml-input-text);
+  transition: border-color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+
+  &:focus {
+    outline: none;
+    border-color: var(--ml-input-focus-border-color, $ml-input-focus-border-color);
+  }
+
+  &::placeholder {
+    color: var(--ml-input-placeholder-color, $ml-input-placeholder-color);
+    opacity: 0; // Initially hidden until component is ready
+    transition: opacity var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+  }
+
+  // Show placeholder only after component is fully initialized
+  :host([data-ready]) &::placeholder {
+    opacity: var(--ml-placeholder-opacity, $ml-placeholder-opacity);
+  }
+}
+
+// ==============================================================================
+// TOGGLE ICON
+// ==============================================================================
+
+// Dropdown toggle icon
+.ml__toggle {
+  position: absolute;
+  right: var(--ml-toggle-right, $ml-toggle-right);
+  top: 50%;
+  transform: var(--ml-transform-center-y, $ml-transform-center-y);
+  pointer-events: none;
+  color: var(--ml-toggle-color, $ml-toggle-color);
+  transition: transform var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+
+  .ml--open & {
+    transform: var(--ml-transform-center-y, $ml-transform-center-y) rotate(var(--ml-transform-rotate-180, $ml-transform-rotate-180));
+  }
+}
+
+// ==============================================================================
+// COUNT BADGE (IN INPUT)
+// ==============================================================================
+
+// Count badge (appears next to toggle icon)
+.ml__count-badge {
+  position: absolute;
+  right: var(--ml-count-badge-offset, $ml-count-badge-offset); // Space for toggle icon
+  top: 50%;
+  transform: var(--ml-transform-center-y, $ml-transform-center-y);
+  padding: var(--ml-count-badge-padding, $ml-count-badge-padding);
+  background: var(--ml-count-badge-bg, $ml-count-badge-bg);
+  color: var(--ml-count-badge-color, $ml-count-badge-color);
+  font-size: var(--ml-count-badge-font-size, $ml-count-badge-font-size);
+  font-weight: var(--ml-count-badge-font-weight, $ml-count-badge-font-weight);
+  border-radius: var(--ml-count-badge-border-radius, $ml-count-badge-border-radius);
+  cursor: pointer;
+  transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+
+  &:hover {
+    background: var(--ml-count-badge-bg-hover, $ml-count-badge-bg-hover);
+    transform: var(--ml-transform-center-y, $ml-transform-center-y)
+      scale(var(--ml-transform-scale-hover, $ml-transform-scale-hover));
+  }
+}
+
+// ==============================================================================
+// FLOATING HINT
+// ==============================================================================
+
+// Floating search hint (appears above input)
+.ml__hint {
+  display: none;
+  position: absolute;
+  z-index: var(--ml-z-index-popover, $ml-z-index-popover);
+  padding: var(--ml-hint-padding, $ml-hint-padding);
+  background: var(--ml-hint-bg, $ml-hint-bg);
+  border: var(--ml-hint-border, $ml-hint-border);
+  border-radius: var(--ml-hint-border-radius, $ml-hint-border-radius);
+  box-shadow: var(--ml-hint-box-shadow, $ml-hint-box-shadow);
+  font-size: var(--ml-hint-font-size, $ml-hint-font-size);
+  color: var(--ml-hint-color, $ml-hint-color);
+  line-height: var(--ml-line-height-relaxed, $ml-line-height-relaxed);
+  max-width: 100%;
+
+  &--visible {
+    display: block;
+  }
+}
+
+// ==============================================================================
+// DROPDOWN CONTAINER
+// ==============================================================================
+
+// Floating dropdown (appears below input)
+.ml__dropdown {
+  display: none;
+  position: absolute;
+  z-index: var(--ml-z-index-dropdown, $ml-z-index-dropdown);
+  background: var(--ml-dropdown-bg, $ml-dropdown-bg);
+  border: var(--ml-dropdown-border, $ml-dropdown-border);
+  border-radius: var(--ml-dropdown-border-radius, $ml-dropdown-border-radius);
+  box-shadow: var(--ml-dropdown-box-shadow, $ml-dropdown-box-shadow);
+  max-height: var(--ml-dropdown-max-height, $ml-dropdown-max-height);
+  overflow-y: auto;
+  color: var(--ml-dropdown-color, $ml-dropdown-color);
+
+  &--visible {
+    display: block;
+  }
+}
+
+// ==============================================================================
+// DROPDOWN ACTIONS
+// ==============================================================================
+
+// Dropdown actions (Select All / Clear All)
+.ml__actions {
+  display: flex;
+  gap: var(--ml-actions-gap, $ml-actions-gap);
+  padding: var(--ml-actions-padding, $ml-actions-padding);
+  border-bottom: var(--ml-actions-border-bottom, $ml-actions-border-bottom);
+
+  &--sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--ml-z-index-sticky, $ml-z-index-sticky);
+    background: var(--ml-actions-bg, $ml-actions-bg);
+  }
+}
+
+.ml__action-btn {
+  flex: 1;
+  padding: var(--ml-action-btn-padding, $ml-action-btn-padding);
+  font-size: var(--ml-action-btn-font-size, $ml-action-btn-font-size);
+  border: var(--ml-action-btn-border, $ml-action-btn-border);
+  border-radius: var(--ml-action-btn-border-radius, $ml-action-btn-border-radius);
+  background: var(--ml-action-btn-bg, $ml-action-btn-bg);
+  color: var(--ml-action-btn-color, $ml-action-btn-color);
+  cursor: pointer;
+  transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+
+  &:hover {
+    background: var(--ml-action-btn-bg-hover, $ml-action-btn-bg-hover);
+    border-color: var(--ml-action-btn-border-color-hover, $ml-action-btn-border-color-hover);
+  }
+
+  &:active {
+    transform: scale(var(--ml-transform-scale-active, $ml-transform-scale-active));
+  }
+}

package/src/scss/_modifiers.scss

@@ -0,0 +1,95 @@
+// ==============================================================================
+// MODIFIERS & VARIANTS
+// ==============================================================================
+// Size variants (xs, sm, lg, xl) and state modifiers (disabled, no-checkboxes)
+
+@use 'variables' as *;
+
+// ==============================================================================
+// SIZE VARIANTS
+// ==============================================================================
+
+.ml--xs {
+  .ml__input {
+    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+  }
+
+  .ml__option {
+    padding: var(--ml-spacing-xs, $ml-spacing-xs) var(--ml-spacing-sm, $ml-spacing-sm);
+  }
+
+  .ml__option-title {
+    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+  }
+
+  .ml__pill {
+    font-size: var(--ml-font-size-2xs, $ml-font-size-2xs);
+  }
+}
+
+.ml--sm {
+  .ml__input {
+    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+  }
+
+  .ml__option-title {
+    font-size: var(--ml-font-size-xs, $ml-font-size-xs);
+  }
+}
+
+.ml--lg {
+  .ml__input {
+    font-size: var(--ml-font-size-base, $ml-font-size-base);
+  }
+
+  .ml__option-title {
+    font-size: var(--ml-font-size-base, $ml-font-size-base);
+  }
+
+  .ml__pill {
+    font-size: var(--ml-font-size-sm, $ml-font-size-sm);
+  }
+}
+
+.ml--xl {
+  .ml__input {
+    font-size: var(--ml-font-size-lg, $ml-font-size-lg);
+  }
+
+  .ml__option-title {
+    font-size: var(--ml-font-size-lg, $ml-font-size-lg);
+  }
+
+  .ml__pill {
+    font-size: var(--ml-font-size-base, $ml-font-size-base);
+  }
+}
+
+// ==============================================================================
+// STATE MODIFIERS
+// ==============================================================================
+
+// Disabled state
+.ml--disabled {
+  .ml__input {
+    opacity: var(--ml-disabled-input-opacity, $ml-disabled-input-opacity);
+    cursor: not-allowed;
+    background: var(--ml-input-bg-disabled, $ml-input-bg-disabled);
+  }
+
+  .ml__toggle {
+    opacity: var(--ml-disabled-input-opacity, $ml-disabled-input-opacity);
+  }
+}
+
+// No checkboxes modifier (for simple select mode)
+.ml--no-checkboxes {
+  .ml__option {
+    gap: 0; // Remove gap since there's no checkbox
+    padding-left: var(--ml-option-padding-h, $ml-option-padding-h); // Adjust padding
+  }
+
+  .ml__option-content {
+    padding-left: 0; // No extra padding needed
+  }
+}

package/src/scss/_options.scss

@@ -0,0 +1,175 @@
+// ==============================================================================
+// OPTIONS & CONTENT
+// ==============================================================================
+// Options list, groups, checkbox, option content, icons, text, and states
+
+@use 'variables' as *;
+
+// ==============================================================================
+// OPTIONS CONTAINER
+// ==============================================================================
+
+// Options container
+.ml__options {
+  padding: var(--ml-options-padding, $ml-options-padding);
+}
+
+// ==============================================================================
+// GROUPS
+// ==============================================================================
+
+// Group
+.ml__group {
+  & + & {
+    border-top: var(--ml-group-border-top, $ml-group-border-top);
+    margin-top: var(--ml-group-margin-top, $ml-group-margin-top);
+    padding-top: var(--ml-group-padding-top, $ml-group-padding-top);
+  }
+}
+
+// Group label
+.ml__group-label {
+  padding: var(--ml-group-label-padding, $ml-group-label-padding);
+  font-size: var(--ml-group-label-font-size, $ml-group-label-font-size);
+  font-weight: var(--ml-group-label-font-weight, $ml-group-label-font-weight);
+  color: var(--ml-group-label-color, $ml-group-label-color);
+  text-transform: var(--ml-group-label-transform, $ml-group-label-transform);
+  letter-spacing: var(--ml-group-label-letter-spacing, $ml-group-label-letter-spacing);
+}
+
+// ==============================================================================
+// INDIVIDUAL OPTION
+// ==============================================================================
+
+// Individual option
+.ml__option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ml-option-gap, $ml-option-gap);
+  padding: var(--ml-option-padding, $ml-option-padding);
+  cursor: pointer;
+  transition: background-color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
+
+  &:hover {
+    background: var(--ml-option-bg-hover, $ml-option-bg-hover);
+  }
+
+  &--focused {
+    background: var(--ml-option-bg-focused, $ml-option-bg-focused);
+    outline: var(--ml-option-outline-focused, $ml-option-outline-focused);
+    outline-offset: var(--ml-option-focus-outline-offset, $ml-option-focus-outline-offset);
+  }
+
+  &--selected {
+    background: var(--ml-option-bg-selected, $ml-option-bg-selected);
+  }
+
+  &--disabled {
+    opacity: var(--ml-disabled-opacity, $ml-disabled-opacity);
+    cursor: not-allowed;
+
+    &:hover {
+      background: var(--ml-option-bg, $ml-option-bg);
+    }
+  }
+}
+
+// ==============================================================================
+// CHECKBOX
+// ==============================================================================
+
+// Checkbox
+.ml__checkbox {
+  flex-shrink: 0;
+  margin-top: var(--ml-checkbox-margin-top, $ml-checkbox-margin-top); // Align with first line of text
+  cursor: pointer;
+
+  .ml__option--disabled & {
+    cursor: not-allowed;
+  }
+}
+
+// ==============================================================================
+// OPTION CONTENT
+// ==============================================================================
+
+// Option content (rich content wrapper)
+.ml__option-content {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ml-option-content-gap, $ml-option-content-gap);
+  min-width: 0; // Allow text truncation
+}
+
+// Option icon/SVG
+.ml__option-icon {
+  flex-shrink: 0;
+  width: var(--ml-option-icon-size, $ml-option-icon-size);
+  height: var(--ml-option-icon-size, $ml-option-icon-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ml-option-icon-font-size, $ml-option-icon-font-size);
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+}
+
+// Option text container
+.ml__option-text {
+  flex: 1;
+  min-width: 0;
+}
+
+// Option title/main text
+.ml__option-title {
+  font-size: var(--ml-option-title-font-size, $ml-option-title-font-size);
+  color: var(--ml-option-title-color, $ml-option-title-color);
+  line-height: var(--ml-line-height-relaxed, $ml-line-height-relaxed);
+
+  // Highlight matched text
+  mark {
+    background: var(--ml-option-mark-bg, $ml-option-mark-bg);
+    color: var(--ml-option-mark-color, $ml-option-mark-color);
+    font-weight: var(--ml-option-mark-font-weight, $ml-option-mark-font-weight);
+  }
+}
+
+// Option subtitle (multiline support)
+.ml__option-subtitle {
+  margin-top: var(--ml-option-subtitle-margin-top, $ml-option-subtitle-margin-top);
+  font-size: var(--ml-option-subtitle-font-size, $ml-option-subtitle-font-size);
+  color: var(--ml-option-subtitle-color, $ml-option-subtitle-color);
+  line-height: var(--ml-option-subtitle-line-height, $ml-option-subtitle-line-height);
+}
+
+// ==============================================================================
+// STATES
+// ==============================================================================
+
+// Empty state
+.ml__empty {
+  padding: var(--ml-empty-padding, $ml-empty-padding);
+  text-align: center;
+  font-size: var(--ml-empty-font-size, $ml-empty-font-size);
+  color: var(--ml-empty-color, $ml-empty-color);
+}
+
+// Loading state
+.ml__loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ml-loader-padding, $ml-loader-padding);
+  gap: var(--ml-loader-gap, $ml-loader-gap);
+}
+
+.ml__loading-text {
+  font-size: var(--ml-loading-text-font-size, $ml-loading-text-font-size);
+  color: var(--ml-loading-text-color, $ml-loading-text-color);
+}