@fluid-topics/ft-select 0.1.3 → 0.1.7

package/build/ft-select.d.ts

@@ -25,10 +25,11 @@ export declare const FtSelectCssVariables: {
     labelSize: FtCssVariable;
     selectedOptionSize: FtCssVariable;
     verticalSpacing: FtCssVariable;
+    selectedOptionColor: FtCssVariable;
     helperColor: FtCssVariable;
+    optionsColor: FtCssVariable;
     optionsZIndex: FtCssVariable;
     colorSurface: FtCssVariable;
-    colorOnSurface: FtCssVariable;
     colorOnSurfaceDisabled: FtCssVariable;
     colorPrimary: FtCssVariable;
     borderRadiusS: FtCssVariable;

package/build/ft-select.js

@@ -11,7 +11,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyBody1CssVariables, FtTypographyBody2, FtTypographyCaption } from "@fluid-topics/ft-typography";
 import { FtInputLabel, FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
-import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
 import { Icon } from "@material/mwc-icon";
 let FtSelectOption = class FtSelectOption extends FtLitElement {
     constructor() {
@@ -46,10 +46,11 @@ export const FtSelectCssVariables = {
     labelSize: FtCssVariable.create("--ft-select-label-size", "SIZE", "11px"),
     selectedOptionSize: FtCssVariable.create("--ft-select-selected-option-size", "SIZE", "14px"),
     verticalSpacing: FtCssVariable.create("--ft-select-vertical-spacing", "SIZE", "4px"),
+    selectedOptionColor: FtCssVariable.extend("--ft-select-selected-option-color", designSystemVariables.colorOnSurface),
     helperColor: FtCssVariable.extend("--ft-select-helper-color", designSystemVariables.colorOnSurfaceMedium),
+    optionsColor: FtCssVariable.extend("--ft-select-options-color", designSystemVariables.colorOnSurface),
     optionsZIndex: FtCssVariable.create("--ft-select-options-z-index", "NUMBER", "2"),
     colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
-    colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
     colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
     colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
     borderRadiusS: FtCssVariable.external(designSystemVariables.borderRadiusS, "Design system"),
@@ -98,13 +99,14 @@ let FtSelect = class FtSelect extends FtLitElement {
                     padding-left: 16px;
                     padding-right: 8px;
                     gap: 8px;
+                    color: ${FtSelectCssVariables.selectedOptionColor};
+                    ${setVariable(FtRippleCssVariables.color, FtSelectCssVariables.selectedOptionColor)};
                 }
 
                 .ft-select--input-panel,
                 .ft-select--option {
-                    color: ${FtSelectCssVariables.colorOnSurface};
-                    --ft-opacity-color-content-on-surface-hover: 0.08;
-                    --ft-opacity-color-content-on-surface-dragged: 0.04;
+                    ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
+                    ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceDragged, "0.04")};
                 }
 
                 .ft-select--disabled .ft-select--input-panel,
@@ -169,6 +171,7 @@ let FtSelect = class FtSelect extends FtLitElement {
                     top: 100%;
                     left: 0;
                     right: 0;
+                    color: ${FtSelectCssVariables.optionsColor};
                     background: ${FtSelectCssVariables.colorSurface};
                     z-index: ${FtSelectCssVariables.optionsZIndex};
                     box-shadow: ${FtSelectCssVariables.elevation02};
@@ -218,14 +221,15 @@ let FtSelect = class FtSelect extends FtLitElement {
                     <div class="ft-select--input-panel"
                          part="selected-value"
                          tabindex="${disabled ? "-1" : "0"}"
-                         @click=${() => this.optionsDisplayed = !this.optionsDisplayed}
+                         @click=${() => {
+            this.optionsDisplayed = !this.optionsDisplayed;
+            this.focusOptions = this.optionsDisplayed;
+        }}
                          @keydown=${this.onMainPanelKeyDown}
                          aria-label="${this.label}"
                          aria-haspopup="listbox"
                          aria-expanded="${optionsDisplayed}">
-                        ${this.outlined ? null : html `
-                            <ft-ripple ?disabled=${disabled} activated></ft-ripple>
-                        `}
+                        <ft-ripple ?disabled=${disabled} ?activated=${!this.outlined}></ft-ripple>
                         <ft-typography variant="body1" class="ft-select--selected-option">
                             ${((_c = this.selectedOption) === null || _c === void 0 ? void 0 : _c.value) != null ? (_e = (_d = this.selectedOption) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "" : ""}
                         </ft-typography>