@wistia/ui 0.19.1-beta.b5f9943f.e933a21 → 0.19.1

package/dist/index.d.mts

@@ -471,11 +471,6 @@ type ActionButtonProps = {
      * Disables the button
      */
     disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: 'focus' | 'hover' | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -504,11 +499,6 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -533,11 +523,6 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */

package/dist/index.d.ts

@@ -471,11 +471,6 @@ type ActionButtonProps = {
      * Disables the button
      */
     disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: 'focus' | 'hover' | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -504,11 +499,6 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
@@ -533,11 +523,6 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
      * Disables the button
      */
     disabled?: boolean;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: "focus" | "hover" | undefined;
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.19.1-beta.b5f9943f.e933a21
+ * @license @wistia/ui v0.19.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3363,8 +3363,8 @@ var buttonExtraLargeStyles = css17`
 `;
 var ghostButtonVariant = css17`
   --button-color-bg-override: transparent;
-  --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
-  --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
+  --button-color-bg-hover: var(--wui-color-bg-surface-hover);
+  --button-color-bg-active: var(--wui-color-bg-surface-active);
   --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
@@ -3404,24 +3404,6 @@ var pressedButtonVariant = css17`
   --button-color-icon: var(--wui-color-icon-selected);
   --button-color-border: var(--wui-color-border-selected);
 `;
-var buttonFocusStyles = css17`
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible,
-  &.force-state-focus {
-    --wui-button-focus-color: var(--wui-color-focus-ring);
-
-    box-shadow:
-      inset 0 0 0 2px var(--wui-button-focus-color),
-      inset 0 0 0 3px var(--wui-color-bg-app);
-
-    &[aria-disabled='true'] {
-      --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
-    }
-  }
-`;
 var buttonBaseStyles = css17`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
@@ -3459,14 +3441,12 @@ var buttonBaseStyles = css17`
 
   &:focus-visible,
   &.force-state-focus {
-    --wui-button-focus-color: var(--wui-color-focus-ring);
-
-    box-shadow:
-      inset 0 0 0 2px var(--wui-button-focus-color),
-      inset 0 0 0 3px var(--wui-color-bg-app);
+    outline: 2px solid var(--wui-color-focus-ring);
+    outline-offset: 2px;
+    background: var(--button-color-bg-hover);
 
     &[aria-disabled='true'] {
-      --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
+      outline-color: var(--wui-color-border-disabled);
     }
   }
 
@@ -8100,20 +8080,22 @@ var StyledActionButton = styled7(Button)`
   }
 
   &:hover,
-  &:focus-visible,
-  &.force-state-hover,
-  &.force-state-focus {
+  &:focus-visible {
     --wui-color-text: var(--wui-color-text-button);
 
     ${({ $hoverColorScheme }) => getColorScheme($hoverColorScheme)};
     background: var(--wui-color-bg-surface-tertiary);
   }
 
-  ${buttonFocusStyles}
+  &:focus-visible {
+    outline: 2px solid var(--wui-color-focus-ring);
+    outline-offset: 2px;
+  }
 
   &[aria-disabled='true'] {
     background: var(--wui-color-bg-surface-disabled);
     color: var(--wui-color-text-disabled);
+    outline-color: var(--wui-color-focus-ring-disabled);
     cursor: not-allowed;
 
     && {
@@ -8151,9 +8133,7 @@ var StyledSecondaryIcon = styled7.div`
       opacity: 0;
       transform: translateX(-16px);
       ${StyledActionButton}:hover:not([aria-disabled="true"]) &,
-      ${StyledActionButton}:focus-visible:not([aria-disabled="true"]) &,
-      ${StyledActionButton}.force-state-hover:not([aria-disabled="true"]) &,
-      ${StyledActionButton}.force-state-focus:not([aria-disabled="true"]) & {
+  ${StyledActionButton}:focus-visible:not([aria-disabled="true"]) & {
         transform: translateX(0);
         opacity: 1;
       }
@@ -8182,7 +8162,6 @@ var ActionButton = forwardRef3(
     icon,
     colorScheme = "standard",
     disabled = false,
-    forceState,
     hoverColorScheme,
     variant = "default",
     children,
@@ -8203,7 +8182,6 @@ var ActionButton = forwardRef3(
         $colorScheme: colorScheme,
         $hoverColorScheme: resolvedHoverColorScheme,
         disabled,
-        forceState,
         unstyled: true,
         children: [
           /* @__PURE__ */ jsx210(StyledMainIcon, { children: icon }),