@lime-bundles/widget 2.5.0 → 2.5.1

package/dist/lime-bundle.global.js

@@ -567,10 +567,10 @@
    click-to-focus doesn't leave a keyboard-style ring. The modal overlay
    gets its own selector because the Liquid path reparents it to body,
    outside the widget root. */
-.using-mouse .lb-bundle-widget :focus,
-.using-mouse .lb-bundle-widget :focus-visible,
-.using-mouse .lb-mix-match__modal-overlay :focus,
-.using-mouse .lb-mix-match__modal-overlay :focus-visible {
+.using-mouse .lb-bundle-widget :focus:not([aria-checked="true"]),
+.using-mouse .lb-bundle-widget :focus-visible:not([aria-checked="true"]),
+.using-mouse .lb-mix-match__modal-overlay :focus:not([aria-checked="true"]),
+.using-mouse .lb-mix-match__modal-overlay :focus-visible:not([aria-checked="true"]) {
   outline: none;
   outline-offset: 0;
   box-shadow: none;
@@ -1446,10 +1446,21 @@
 }
 
 .lb-volume__tier:hover {
-  border-color: color-mix(in srgb, var(--lb-tier-border-color) 50%, black);
+  border-color: var(--lb-tier-selected-border-color);
+}
+
+/* Suppress the UA default focus outline so a freshly-clicked selected
+   tier doesn't briefly show the 1px focus ring on top of (or in place of)
+   the custom selected-state outline below. Keyboard focus is still
+   indicated by the :focus-visible rule. */
+.lb-volume__tier:focus {
+  outline: none;
 }
 
-.lb-volume__tier:focus-visible {
+/* Keyboard focus indicator \u2014 explicitly excludes the selected tier so
+   the selected-state outline rule below has full ownership of the
+   outline property when both states apply at once. */
+.lb-volume__tier:focus-visible:not([aria-checked="true"]) {
   outline: 2px solid var(--lb-primary-color);
   outline-offset: 2px;
 }