@fluid-topics/ft-search-input 1.1.8 → 1.1.10

package/build/ft-search-input.css.d.ts

@@ -7,8 +7,8 @@ export declare const FtSearchInputCssVariables: {
     colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    focusOutlineColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     buttonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     buttonRippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };

package/build/ft-search-input.css.js

@@ -7,19 +7,21 @@ export const FtSearchInputCssVariables = {
     borderRadius: FtCssVariableFactory.extend("--ft-search-input-border-radius", "", designSystemVariables.borderRadiusS),
     desktopFiltersHeight: FtCssVariableFactory.create("--ft-search-input-desktop-filters-height", "", "SIZE", "350px"),
     floatingZIndex: FtCssVariableFactory.create("--ft-search-input-floating-components-z-index", "", "NUMBER", "3"),
-    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
-    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
-    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
-    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
-    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
-    elevation02: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
-    buttonColor: FtCssVariableFactory.external(FtButtonCssVariables.color, "Button"),
-    buttonRippleColor: FtCssVariableFactory.external(FtButtonCssVariables.rippleColor, "Button"),
+    colorSurface: FtCssVariableFactory.extend("--ft-search-input-background-color", "", designSystemVariables.colorSurface),
+    colorOnSurface: FtCssVariableFactory.extend("--ft-search-input-color", "", designSystemVariables.colorOnSurface),
+    colorOnSurfaceMedium: FtCssVariableFactory.extend("--ft-search-input-placeholder-color", "", designSystemVariables.colorOnSurfaceMedium),
+    colorOutline: FtCssVariableFactory.extend("--ft-search-input-outline-color", "", designSystemVariables.colorOutline),
+    elevation02: FtCssVariableFactory.extend("--ft-search-input-elevation", "", designSystemVariables.elevation02),
+    focusOutlineColor: FtCssVariableFactory.extend("--ft-search-input-focused-outline-color", "", designSystemVariables.colorPrimary),
+    buttonColor: FtCssVariableFactory.extend("--ft-search-input-button-color", "", designSystemVariables.colorPrimary),
+    buttonRippleColor: FtCssVariableFactory.extend("--ft-search-input-button-ripple-color", "", designSystemVariables.colorPrimary),
 };
 // language=CSS
 export const styles = css `
     * {
         box-sizing: border-box;
+        ${setVariable(FtButtonCssVariables.color, FtSearchInputCssVariables.buttonColor)};
+        ${setVariable(FtButtonCssVariables.rippleColor, FtSearchInputCssVariables.buttonRippleColor)};
     }
 
     .ft-search-input {
@@ -35,10 +37,10 @@ export const styles = css `
     }
 
     .ft-search-input--input-container {
-        flex-grow: 1;
-        flex-shrink: 1;
         position: relative;
+        flex: 1;
         height: calc(100% - 2px);
+        min-width: 0;
     }
 
     .ft-search-input--input-outline {
@@ -50,11 +52,12 @@ export const styles = css `
     }
 
     .ft-search-input--input-container:focus-within .ft-search-input--input-outline {
-        outline: 2px solid ${FtSearchInputCssVariables.colorPrimary};
+        outline: 2px solid ${FtSearchInputCssVariables.focusOutlineColor};
     }
 
     .ft-search-input--input {
         height: 100%;
+        width: 100%;
         border: none;
         background-color: transparent;
         color: ${FtSearchInputCssVariables.colorOnSurface};