add optional css classes

CHANGELOG.md

@@ -18,6 +18,10 @@
 - [breaking] remove `svelte-tiny-virtual-list` dependency, provide own implementation
 - [breaking] remove `vlHeight` property, related to removal of virtual list dependency, use `--max-height` css property instead
 - add `html` renderer since default one escapes following HTML entities: `<`, `>`, `&`, `'` and `"`
+- add properties for additional CSS styling:
+    - `controlClass` for `.sv-control`
+    - `dropdownClass` for `.sv_dropdown`
+    - `optionClass` for `.sv-item--wrap.in-dropdown` elements
 
 ## v4.0:
 

README.md

@@ -107,6 +107,9 @@ i18n                | `object`          | `null`      | I18n object overriding d
 dndzone             | `function`        | noop        | Pass `dndzone` from `svelte-dnd-action`, see [Examples](https://svelecte.vercel.app/examples) page
 validatorAction     | `array`           | `null`      | Bind validator action for inner `<select>` element. Designed to be used with `svelte-use-form`, see [Validation](https://svelecte.vercel.app/validation) page. For this to work, `name` property MUST be defined
 anchor_element      | `bool`            | `null`      | `internal`: when passing also existing select (for custom element)
+controlClass        | `string`          | `null`      | Optional css class for element `.sv-control`
+dropdownClass       | `string`          | `null`      | Optional css class for element `.sv_dropdown`
+optionClass         | `string`          | `null`      | Optional css class for element `.sv-item--wrap.in-dropdown`
 
 
 ## Available slots

src/lib/Svelecte.svelte

@@ -166,6 +166,9 @@
    * @property {import('svelte').Snippet<[isCreating: boolean, inputValue: string, i18n: import('./settings.js').I18nObject]>} [createRow]
    * @property {function} [positionResolver]
    * @property {?string} [anchor_element]
+   * @property {?string} [controlClass]
+   * @property {?string} [dropdownClass]
+   * @property {?string} [optionClass]
    */
 
   /** @type {SvelecteProps} */
@@ -242,7 +245,10 @@
     option = snippet_option,
     createRow = snippet_createRow,
     positionResolver = _noop,
-    anchor_element = undefined
+    anchor_element = undefined,
+    controlClass = undefined,
+    dropdownClass = undefined,
+    optionClass = undefined
   } = $props();
 
   export function focus() {
@@ -1557,7 +1563,7 @@
   {/if}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="sv-control" onmousedown={on_mouse_down} onclick={on_click}>
+  <div class="sv-control {controlClass}" onmousedown={on_mouse_down} onclick={on_click}>
     {#if prepend}{@render prepend()}{/if}
     <!-- #region selection & input -->
     <div class="sv-control--selection" class:is-single={multiple === false} class:has-items={selectedOptions.length > 0} class:has-input={input_value.length}
@@ -1619,7 +1625,7 @@
   <!-- #region DROPDOWN -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="sv_dropdown" class:is-open={dropdown_show}
+  <div class="sv_dropdown {dropdownClass} " class:is-open={dropdown_show}
     onmousedown={on_mouse_down}
     onclick={on_click}
     use:positionResolver
@@ -1642,7 +1648,7 @@
                   <div class="sv-optgroup-header"><b>{opt.label}</b></div>
                 {:else}
                   <div data-pos={index}
-                    class="sv-item--wrap in-dropdown"
+                    class="sv-item--wrap in-dropdown {optionClass}"
                     class:sv-dd-item-active={dropdown_index === index}
                     class:is-selected={opt.$selected || selectedKeys.has(opt[currentValueField])}
                     class:is-disabled={opt[disabledField]}
@@ -1658,7 +1664,7 @@
                 <div class="sv-optgroup-header"><b>{opt.label}</b></div>
               {:else}
                 <div data-pos={i}
-                  class="sv-item--wrap in-dropdown"
+                  class="sv-item--wrap in-dropdown {optionClass}"
                   class:sv-dd-item-active={dropdown_index === i}
                   class:is-selected={opt.$selected}
                   class:is-disabled={opt[disabledField]}
@@ -1670,7 +1676,7 @@
           {/if}
         {#if options_filtered.length === 0 && (!creatable || !input_value) || maxReached}
           <div class="is-dropdown-row">
-            <div class="sv-item--wrap in-dropdown"><div class="sv-item--content">{listMessage}</div></div>
+            <div class="sv-item--wrap in-dropdown {optionClass}"><div class="sv-item--content">{listMessage}</div></div>
           </div>
         {/if}
       </div>

src/routes/properties/+page.svelte.md

@@ -54,8 +54,11 @@ vlItemSize          | `number`          | `null`      | Height of one row (if no
 searchProps         | `object`          | `null`      | Customize `sifter.js` settings. See [Searching](/searching) page for more details
 class               | `string`          | `svelecte-control` | default css class
 i18n                | `object`          | `null`      | I18n object overriding default settings
-dndzone             | `function`        | noop        | Pass `dndzone` from `svelte-dnd-action`, if you want to support selection reordering. See the [example REPL](https://svelte.dev/repl/da2de4b9ed13465d892b678eba07ed99?version=3.44.0)
+dndzone             | `function`        | noop        | Pass `dndzone` from `svelte-dnd-action`, if you want to support selection reordering. See the [examples](/examples#drag--drop)
 anchor_element      | `bool`            | `null`      | `internal`: when passing also existing select (for custom element)
+controlClass        | `string`          | `null`      | Optional css class for element `.sv-control`
+dropdownClass       | `string`          | `null`      | Optional css class for element `.sv_dropdown`
+optionClass         | `string`          | `null`      | Optional css class for element `.sv-item--wrap.in-dropdown`
 
 ## Event callback props