@fluid-topics/ft-combobox 1.3.35 → 1.3.36

package/build/ft-combobox.properties.d.ts

@@ -15,4 +15,7 @@ export interface FtComboboxProperties {
     suggestionsProvider: (query: string) => FtComboboxSuggestionDefinition[] | Promise<FtComboboxSuggestionDefinition[]>;
     suggestionsProviderDebouncerTimeout?: number;
     canOfferNewValue?: boolean;
+    multiValued?: boolean;
+    maxValues?: number;
+    maxLength?: number;
 }

package/build/ft-combobox.styles.d.ts

@@ -1,4 +1,7 @@
 export declare const FtComboboxCssVariables: {
+    chipGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    chipsMarginTop: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    suggestSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     labelSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     verticalSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
@@ -15,6 +18,5 @@ export declare const FtComboboxCssVariables: {
     backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    suggestSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

package/build/ft-combobox.styles.js

@@ -1,9 +1,14 @@
 import { css } from "lit";
-import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { foundation, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label/build/ft-input-label.styles";
 import { FtTextFieldCssVariables } from "@fluid-topics/ft-text-field";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon";
-export const FtComboboxCssVariables = FtTextFieldCssVariables;
+export const FtComboboxCssVariables = {
+    ...FtTextFieldCssVariables,
+    chipGap: FtCssVariableFactory.extend("--ft-combobox-chip-gap", "", foundation.spacing1),
+    chipsMarginTop: FtCssVariableFactory.extend("--ft-combobox-chips-margin-top", "", foundation.spacing2),
+    suggestSize: FtCssVariableFactory.create("--ft-combobox-suggest-size", "", "SIZE", "370px"),
+};
 // language=CSS
 export const styles = css `
     *:focus {
@@ -165,8 +170,8 @@ export const styles = css `
         color: ${FtComboboxCssVariables.helperColor};
     }
 
-    .ft-combobox--option[aria-selected="true"] .ft-combobox-suggestion,
-    .ft-combobox--option:hover .ft-combobox-suggestion {
+    .ft-combobox--option[data-active="true"] .ft-combobox-suggestion,
+    .ft-combobox--option:hover:not([data-selected="true"]) .ft-combobox-suggestion {
         background-color: rgba(0, 0, 0, 0.04);
     }
 
@@ -183,4 +188,15 @@ export const styles = css `
     .ft-combobox--with-icon {
         ${setVariable(FtInputLabelCssVariables.labelMaxWidth, `calc(100% - ${FtIconCssVariables.size} - ${FtComboboxCssVariables.horizontalSpacing})`)};
     }
+
+    .ft-combobox--chips-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${FtComboboxCssVariables.chipGap};
+        margin-top: ${FtComboboxCssVariables.chipsMarginTop};
+    }
+
+    .ft-combobox--chips-container ft-chip {
+        flex-shrink: 0;
+    }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-combobox",
-    "version": "1.3.35",
+    "version": "1.3.36",
     "description": "A",
     "keywords": [
         "Lit"
@@ -19,11 +19,11 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-wc-utils": "1.3.35",
+        "@fluid-topics/ft-wc-utils": "1.3.36",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.35"
+        "@fluid-topics/ft-wc-test-utils": "1.3.36"
     },
-    "gitHead": "0e3b05b87604efbb46dd737c0feb9096d7aa66cb"
+    "gitHead": "2e787b122ee8dcc6f8720473bd8949063593d836"
 }