memorial-ui-component-library 1.0.10-beta.13 → 1.0.10-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memorial-ui-component-library",
-  "version": "1.0.10-beta.13",
+  "version": "1.0.10-beta.16",
   "private": false,
   "description": "Memorial Health System Vue UI library.",
   "author": "Solutions Development",

package/src/assets/scss/_focus.scss

@@ -8,56 +8,40 @@
   --sd-focus-offset-inset: 2px;
 }
 
-// Hide focus styles by default (for mouse users)
-:focus:not(:focus-visible) {
-  outline: none !important;
-  box-shadow: none !important;
-  &::before {
-    display: none !important;
+// Only show focus when using keyboard navigation
+body:not(.user-is-tabbing) {
+  *:focus {
+    outline: none !important;
   }
 }
 
-// Global focus styles
-
-// Default focus style for interactive elements
-:focus-visible {
-  outline: var(--sd-focus-width) solid var(--sd-focus-color);
-  outline-offset: var(--sd-focus-offset);
-}
-
-// Enhanced focus for form controls
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-button:focus-visible,
-[role="button"]:focus-visible,
-[role="combobox"]:focus-visible,
-[tabindex]:focus-visible {
-  outline: var(--sd-focus-width) solid var(--sd-focus-color);
-  outline-offset: var(--sd-focus-offset);
-}
-
-// Focus within containers (for composite widgets)
-[role="combobox"]:focus-within,
-[role="listbox"]:focus-within,
-[role="menu"]:focus-within {
-  outline: var(--sd-focus-width-secondary) solid var(--sd-focus-color);
-  outline-offset: var(--sd-focus-offset-secondary);
-}
-
-// Focus styles for list items
-[role="option"].focus,
-[role="menuitem"].focus,
-[role="option"]:focus-visible,
-[role="menuitem"]:focus-visible {
-  outline: var(--sd-focus-width) solid var(--sd-focus-color);
-  outline-offset: var(--sd-focus-offset-inset);
-  position: relative;
+// Show focus styles when tabbing
+body.user-is-tabbing {
+  *:focus {
+    outline: var(--sd-focus-width) solid var(--sd-focus-color) !important;
+    outline-offset: var(--sd-focus-offset) !important;
+  }
+  
+  [role="combobox"]:focus:focus-within,
+  [role="listbox"]:focus:focus-within,
+  [role="menu"]:focus:focus-within {
+    outline: var(--sd-focus-width-secondary) solid var(--sd-focus-color) !important;
+    outline-offset: var(--sd-focus-offset-secondary) !important;
+  }
+  
+  [role="option"].focus,
+  [role="menuitem"].focus,
+  [role="option"]:focus,
+  [role="menuitem"]:focus {
+    outline: var(--sd-focus-width) solid var(--sd-focus-color) !important;
+    outline-offset: var(--sd-focus-offset-inset) !important;
+    position: relative;
+  }
 }
 
 // Support for high contrast mode
 @media (forced-colors: active) {
-  :focus-visible {
+  :focus {
     outline: var(--sd-focus-width) solid HighlightText !important;
     outline-offset: var(--sd-focus-offset) !important;
   }

package/src/assets/scss/main.scss

@@ -64,3 +64,34 @@ p, span, div, input, textarea, select,
   opacity: 0;
   position: absolute;
 }
+
+/* Override Vuetify container defaults */
+.container {
+  max-width: none !important;
+  width: unset !important;
+  padding: unset !important;
+  margin-right: unset !important;
+  margin-left: unset !important;
+}
+
+@media (min-width: 960px) {
+  .container {
+    max-width: none !important;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: none !important;
+  }
+}
+
+@media (min-width: 1920px) {
+  .container {
+    max-width: none !important;
+  }
+}
+
+html {
+  overflow-y: auto !important;
+}