@wistia/ui 0.19.1 → 0.19.2-beta.2859661a.15d019f

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.19.1
+ * @license @wistia/ui v0.19.2-beta.2859661a.15d019f
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3545,8 +3545,8 @@ var buttonExtraLargeStyles = import_styled_components19.css`
 `;
 var ghostButtonVariant = import_styled_components19.css`
   --button-color-bg-override: transparent;
-  --button-color-bg-hover: var(--wui-color-bg-surface-hover);
-  --button-color-bg-active: var(--wui-color-bg-surface-active);
+  --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
+  --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
   --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
@@ -3623,12 +3623,15 @@ var buttonBaseStyles = import_styled_components19.css`
 
   &:focus-visible,
   &.force-state-focus {
-    outline: 2px solid var(--wui-color-focus-ring);
-    outline-offset: 2px;
+    --wui-button-focus-color: var(--wui-color-focus-ring);
+
     background: var(--button-color-bg-hover);
+    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'] {
-      outline-color: var(--wui-color-border-disabled);
+      --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
     }
   }
 
@@ -8262,22 +8265,29 @@ var StyledActionButton = (0, import_styled_components24.styled)(Button)`
   }
 
   &:hover,
-  &:focus-visible {
+  &:focus-visible,
+  &.force-state-hover,
+  &.force-state-focus {
     --wui-color-text: var(--wui-color-text-button);
 
     ${({ $hoverColorScheme }) => getColorScheme($hoverColorScheme)};
     background: var(--wui-color-bg-surface-tertiary);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--wui-color-focus-ring);
-    outline-offset: 2px;
+  &:focus-visible,
+  &.force-state-focus {
+    --wui-action-button-focus-color: var(--wui-color-focus-ring);
+
+    box-shadow:
+      inset 0 0 0 2px var(--wui-action-button-focus-color),
+      inset 0 0 0 3px var(--wui-color-bg-app);
   }
 
   &[aria-disabled='true'] {
+    --wui-action-button-focus-color: var(--wui-color-focus-ring-disabled);
+
     background: var(--wui-color-bg-surface-disabled);
     color: var(--wui-color-text-disabled);
-    outline-color: var(--wui-color-focus-ring-disabled);
     cursor: not-allowed;
 
     && {
@@ -8315,7 +8325,9 @@ var StyledSecondaryIcon = import_styled_components24.styled.div`
       opacity: 0;
       transform: translateX(-16px);
       ${StyledActionButton}:hover:not([aria-disabled="true"]) &,
-  ${StyledActionButton}:focus-visible: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"]) & {
         transform: translateX(0);
         opacity: 1;
       }
@@ -8344,6 +8356,7 @@ var ActionButton = (0, import_react24.forwardRef)(
     icon,
     colorScheme = "standard",
     disabled = false,
+    forceState,
     hoverColorScheme,
     variant = "default",
     children,
@@ -8364,6 +8377,7 @@ var ActionButton = (0, import_react24.forwardRef)(
         $colorScheme: colorScheme,
         $hoverColorScheme: resolvedHoverColorScheme,
         disabled,
+        forceState,
         unstyled: true,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(StyledMainIcon, { children: icon }),
@@ -12918,7 +12932,7 @@ var SaturationAndValuePicker = ({
 SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 
 // src/components/Combobox/Combobox.tsx
-var Ariakit = __toESM(require("@ariakit/react"));
+var Ariakit = __toESM(require("@ariakit/react"), 1);
 var import_react54 = require("react");
 var import_match_sorter = require("match-sorter");
 var import_styled_components71 = require("styled-components");