fix(input): focus style missing on consumer apps (#371)

- We made the focus inherit from Tailwind config focus,  just need to set different values for `--bq-ring-width`, `--bq-ring-offset-width`, and `--bq-ring-color-focus`.
- Make sure to emit `bqInput` on clear action too.

packages/bee-q/src/components/input/bq-input.tsx

@@ -270,6 +270,7 @@ export class BqInput {
     this.value = this.inputElem.value;
 
     this.bqClear.emit(this.el);
+    this.bqInput.emit({ value: this.value, el: this.el });
     this.bqChange.emit({ value: this.value, el: this.el });
     this.inputElem.focus();
 
@@ -311,7 +312,7 @@ export class BqInput {
         {/* Input control group */}
         <div
           class={{
-            'bq-input--control group': true,
+            'bq-input--control': true,
             [`validation-${this.validationStatus}`]: true,
             disabled: this.disabled,
           }}
@@ -362,7 +363,7 @@ export class BqInput {
             // The clear button will be visible as long as the input has a value
             // and the parent group is hovered or has focus-within
             <bq-button
-              class="bq-input--control__clear ms-[--bq-input--gap] hidden group-hover:inline-block group-[&:has(:focus-within)]:inline-block"
+              class="bq-input--control__clear ms-[--bq-input--gap] hidden"
               appearance="text"
               aria-label={this.clearButtonLabel}
               size="small"

packages/bee-q/src/components/input/scss/bq-input.scss

@@ -5,7 +5,7 @@
 @import './bq-input.variables';
 
 :host {
-  @apply block;
+  @apply block w-full;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -46,13 +46,25 @@
   // Text
   @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];
   // Hover
-  @apply [&:not(:focus-within):not(.disabled)]:hover:border-[color:--bq-input--border-color-hover];
+  @apply [&:not(.disabled):not(:focus-within)]:hover:border-[color:--bq-input--border-color-hover];
 
   border-style: var(--bq-input--border-style);
 
   // Focus
-  &:not(.disabled) {
-    @apply focus-within:border-[color:--bq-input--border-color-focus] focus-within:outline-none focus-within:ring-1 focus-within:ring-[color:--bq-input--border-color-focus];
+  &:not(.disabled):focus-within {
+    --bq-ring-width: 1px;
+    --bq-ring-offset-width: 0;
+    --bq-ring-color-focus: var(--bq-input--border-color-focus);
+
+    @apply focus border-[color:--bq-input--border-color-focus];
+  }
+
+  // Enable clear button whenever the input group control is hovered or has focus
+  &:not(.disabled):hover,
+  &:not(.disabled):focus-within {
+    .bq-input--control__clear {
+      @apply inline-block;
+    }
   }
 }
 
@@ -63,15 +75,30 @@
 /* ------------------------------- Validation ------------------------------- */
 
 .bq-input--control.validation-error {
-  @apply border-stroke-danger focus-within:border-stroke-danger-active focus-within:ring-stroke-danger-active [&:not(:focus-within)]:hover:border-stroke-danger-hover;
+  @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-stroke-danger-hover;
+
+  &:not(.disabled):focus-within {
+    --bq-ring-color-focus: theme('colors.stroke.danger-active');
+    @apply border-stroke-danger-active;
+  }
 }
 
 .bq-input--control.validation-success {
-  @apply border-stroke-success focus-within:border-stroke-success-active focus-within:ring-stroke-success-active [&:not(:focus-within)]:hover:border-stroke-success-hover;
+  @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-stroke-success-hover;
+
+  &:not(.disabled):focus-within {
+    --bq-ring-color-focus: theme('colors.stroke.success-active');
+    @apply border-stroke-success-active;
+  }
 }
 
 .bq-input--control.validation-warning {
-  @apply border-stroke-warning focus-within:border-stroke-warning-active focus-within:ring-stroke-warning-active [&:not(:focus-within)]:hover:border-stroke-warning-hover;
+  @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-stroke-warning-hover;
+
+  &:not(.disabled):focus-within {
+    --bq-ring-color-focus: theme('colors.stroke.warning-active');
+    @apply border-stroke-warning-active;
+  }
 }
 
 /* -------------------------------------------------------------------------- */
@@ -91,6 +118,12 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-input--control__clear::part(button) {
+  // Since the clear button is inside the input group control,
+  // we need to reset the focus ring styles
+  --bq-ring-width: initial;
+  --bq-ring-offset-width: initial;
+  --bq-ring-color-focus: initial;
+
   @apply h-auto rounded-xs border-none p-0;
 }
 

tailwind.config.ts

@@ -103,11 +103,8 @@ const config: Config = {
          *  }
          */
         '.focus': {
-          '--tw-ring-width': '2px',
-          '--tw-ring-offset-width': '1px',
-          '--tw-ring-color': theme('colors.focus'),
-          outline: `var(--tw-ring-width) solid ${String(theme('colors.focus'))}`,
-          outlineOffset: 'var(--tw-ring-offset-width)',
+          outline: `var(--bq-ring-width, 2px) solid var(--bq-ring-color-focus, ${String(theme('colors.focus'))})`,
+          outlineOffset: 'var(--bq-ring-offset-width, 1px)',
         },
       });
     }),