@smilodon/core 1.4.4 → 1.4.5

package/dist/types/src/components/enhanced-select.d.ts

@@ -30,6 +30,8 @@ export declare class EnhancedSelect extends HTMLElement {
     private _errorMessage;
     private _boundArrowClick;
     private _arrowContainer?;
+    private _clearControl?;
+    private _clearControlIcon?;
     private _pendingFirstRenderMark;
     private _pendingSearchRenderMark;
     private _rangeAnchorIndex;
@@ -56,6 +58,7 @@ export declare class EnhancedSelect extends HTMLElement {
     private _createOptionsContainer;
     private _createLiveRegion;
     private _createArrowContainer;
+    private _createClearControl;
     private _assembleDOM;
     private _initializeStyles;
     private _attachEventListeners;
@@ -125,6 +128,10 @@ export declare class EnhancedSelect extends HTMLElement {
      * Clear all selections
      */
     clear(): void;
+    /**
+     * Clear search query and restore full option list
+     */
+    clearSearch(): void;
     /**
      * Open dropdown
      */
@@ -137,6 +144,8 @@ export declare class EnhancedSelect extends HTMLElement {
      * Update component configuration
      */
     updateConfig(config: Partial<GlobalSelectConfig>): void;
+    private _handleClearControlClick;
+    private _syncClearControlState;
     /**
      * Set error state
      */

package/dist/types/src/config/global-config.d.ts

@@ -44,6 +44,20 @@ export interface ExpandableConfig {
     /** Label for the collapse button */
     collapseLabel?: string;
 }
+export interface ClearControlConfig {
+    /** Enable clear control button inside input container */
+    enabled: boolean;
+    /** Clear selected values when button is clicked */
+    clearSelection?: boolean;
+    /** Clear search query when button is clicked */
+    clearSearch?: boolean;
+    /** Hide clear control when there is nothing to clear */
+    hideWhenEmpty?: boolean;
+    /** Accessible label for clear control */
+    ariaLabel?: string;
+    /** Text/icon content shown inside the clear control */
+    icon?: string;
+}
 export interface SelectionConfig {
     /** Single or multi-select mode */
     mode: 'single' | 'multi';
@@ -134,6 +148,11 @@ export interface CallbackConfig {
     onLoadMore?: (page: number) => void;
     /** Called when selection changes */
     onChange?: (selectedItems: unknown[], selectedValues: unknown[]) => void;
+    /** Called when clear control is used */
+    onClear?: (detail: {
+        clearedSelection: boolean;
+        clearedSearch: boolean;
+    }) => void;
     /** Called on error */
     onError?: (error: Error) => void;
 }
@@ -154,6 +173,8 @@ export interface GlobalSelectConfig {
     infiniteScroll: InfiniteScrollConfig;
     /** Expandable dropdown configuration */
     expandable: ExpandableConfig;
+    /** Clear control button configuration */
+    clearControl: ClearControlConfig;
     /** Callbacks */
     callbacks: CallbackConfig;
     /** Enable/disable entire component */

package/dist/types/src/index.d.ts

@@ -1,5 +1,5 @@
 export * from './types.js';
-export type { SelectEventDetail, OpenEventDetail, CloseEventDetail, SearchEventDetail, ChangeEventDetail, LoadMoreEventDetail, RemoveEventDetail, ErrorEventDetail, PageLoadedEventDetail, GroupedItem, RemoteConfig, Placement, Strategy, NativeSelectOptions, RendererHelpers, SelectEventsDetailMap, SelectEventName } from './types.js';
+export type { SelectEventDetail, OpenEventDetail, CloseEventDetail, SearchEventDetail, ChangeEventDetail, LoadMoreEventDetail, RemoveEventDetail, ClearEventDetail, ErrorEventDetail, PageLoadedEventDetail, GroupedItem, RemoteConfig, Placement, Strategy, NativeSelectOptions, RendererHelpers, SelectEventsDetailMap, SelectEventName } from './types.js';
 export type { CustomOptionContract, CustomOptionContext, CustomOptionFactory, ExtendedSelectItem, OptionRendererMode, CustomOptionConfig, CustomOptionEvents } from './types/custom-option.js';
 export * from './renderers/contracts.js';
 export * from './components/native-select.js';

package/dist/types/src/types.d.ts

@@ -55,6 +55,10 @@ export interface RemoveEventDetail {
     item: unknown;
     index: number;
 }
+export interface ClearEventDetail {
+    clearedSelection: boolean;
+    clearedSearch: boolean;
+}
 export interface SelectEventsDetailMap {
     select: SelectEventDetail;
     open: OpenEventDetail;
@@ -65,6 +69,7 @@ export interface SelectEventsDetailMap {
     change: ChangeEventDetail;
     loadMore: LoadMoreEventDetail;
     remove: RemoveEventDetail;
+    clear: ClearEventDetail;
 }
 export type SelectEventName = keyof SelectEventsDetailMap;
 export interface RendererHelpers {

package/dist/types/src/utils/csp-styles.d.ts

@@ -58,7 +58,7 @@ export declare function applyDefaultTheme(element: HTMLElement): void;
  * This CSS is CSP-safe because it's defined at build time as a string constant,
  * not generated at runtime.
  */
-export declare const shadowDOMStyles = "\n:host {\n  display: block;\n  box-sizing: border-box;\n  font-family: var(--ns-font-family, system-ui, -apple-system, sans-serif);\n  font-size: var(--ns-font-size, 14px);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.ns-list {\n  position: relative;\n  overflow: auto;\n  max-height: var(--ns-max-height, 300px);\n  border: 1px solid var(--ns-border-color, #ccc);\n  border-radius: var(--ns-border-radius, 4px);\n  background: var(--ns-bg, white);\n  outline: none;\n}\n\n.ns-list:focus {\n  outline: var(--ns-focus-outline, 2px solid #0066cc);\n  outline-offset: -2px;\n}\n\n.ns-item {\n  padding: var(--ns-item-padding, 8px 12px);\n  min-height: var(--ns-item-height, 40px);\n  color: var(--ns-item-color, inherit);\n  background: var(--ns-item-bg, transparent);\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  transition: background-color 0.15s ease;\n}\n\n.ns-item:hover {\n  background: var(--ns-item-hover-bg, rgba(0, 0, 0, 0.05));\n}\n\n.ns-item[aria-selected=\"true\"] {\n  background: var(--ns-item-selected-bg, rgba(0, 102, 204, 0.1));\n  color: var(--ns-item-selected-color, #0066cc);\n}\n\n.ns-item[data-active=\"true\"] {\n  background: var(--ns-item-active-bg, rgba(0, 102, 204, 0.2));\n}\n\n.ns-item[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ns-viewport {\n  position: relative;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.ns-spacer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  pointer-events: none;\n}\n\n/* Screen reader only */\n.ns-sr-only {\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n/* Portal mode (teleported outside shadow DOM) */\n.ns-portal {\n  position: fixed;\n  z-index: var(--ns-portal-z-index, 9999);\n}\n\n/* CSP warning banner (only shown in development) */\n.ns-csp-warning {\n  padding: 8px;\n  background: #fff3cd;\n  border: 1px solid #ffc107;\n  border-radius: 4px;\n  color: #856404;\n  font-size: 12px;\n  margin-bottom: 8px;\n}\n";
+export declare const shadowDOMStyles = "\n:host {\n  display: block;\n  box-sizing: border-box;\n  font-family: var(--ns-font-family, system-ui, -apple-system, sans-serif);\n  font-size: var(--ns-font-size, 14px);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.ns-list {\n  position: relative;\n  overflow: auto;\n  max-height: var(--ns-max-height, 300px);\n  border: 1px solid var(--ns-border-color, #ccc);\n  border-radius: var(--ns-border-radius, 4px);\n  background: var(--ns-bg, white);\n  outline: none;\n}\n\n.ns-list:focus {\n  outline: var(--ns-focus-outline, 2px solid #0066cc);\n  outline-offset: -2px;\n}\n\n.ns-item {\n  padding: var(--ns-item-padding, 8px 12px);\n  min-height: var(--ns-item-height, 40px);\n  color: var(--ns-item-color, inherit);\n  background: var(--ns-item-bg, transparent);\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  transition: background-color 0.15s ease;\n}\n\n.ns-item:hover {\n  background: var(--ns-item-hover-bg, rgba(0, 0, 0, 0.05));\n}\n\n.ns-item[aria-selected=\"true\"] {\n  background: var(--ns-item-selected-bg, rgba(0, 102, 204, 0.1));\n  color: var(--ns-item-selected-color, #0066cc);\n}\n\n.ns-item[data-active=\"true\"]:not([aria-selected=\"true\"]) {\n  background: var(--ns-item-active-bg, rgba(0, 102, 204, 0.2));\n}\n\n.ns-item[aria-selected=\"true\"][data-active=\"true\"] {\n  background: var(--ns-item-selected-active-bg, var(--ns-item-selected-bg, rgba(0, 102, 204, 0.1)));\n  color: var(--ns-item-selected-active-color, var(--ns-item-selected-color, #0066cc));\n  outline: var(--ns-item-selected-active-outline, 2px solid #0066cc);\n  outline-offset: -2px;\n}\n\n.ns-item[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ns-viewport {\n  position: relative;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.ns-spacer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  pointer-events: none;\n}\n\n/* Screen reader only */\n.ns-sr-only {\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n/* Portal mode (teleported outside shadow DOM) */\n.ns-portal {\n  position: fixed;\n  z-index: var(--ns-portal-z-index, 9999);\n}\n\n/* CSP warning banner (only shown in development) */\n.ns-csp-warning {\n  padding: 8px;\n  background: #fff3cd;\n  border: 1px solid #ffc107;\n  border-radius: 4px;\n  color: #856404;\n  font-size: 12px;\n  margin-bottom: 8px;\n}\n";
 /**
  * Inject static styles into shadow root (CSP-safe).
  * Only called once during component initialization.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smilodon/core",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "High-performance native select component with extreme-scale virtualization - React, Vue, Svelte, Vanilla JS",
   "type": "module",
   "main": "./dist/index.cjs",