memorial-ui-component-library 1.0.10-beta.1-dev.2861 → 1.0.10-beta.1-dev.3029

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memorial-ui-component-library",
-  "version": "1.0.10-beta.1-dev.2861",
+  "version": "1.0.10-beta.1-dev.3029",
   "private": false,
   "description": "Memorial Health System Vue UI library.",
   "author": "Solutions Development",
@@ -11,7 +11,9 @@
     "test:playwright": "start-server-and-test serve http://127.0.0.1:8080/ 'playwright test ./tests/playwright/*'",
     "test:e2e:cicd": "npx start-server-and-test serve http://127.0.0.1:8080/ 'playwright test ./tests/playwright/*'",
     "lint": "vue-cli-service lint",
-    "build:lib": "vue-cli-service build --target lib --name memorial-ui-component-library --entry ./src/index.ts"
+    "build:lib": "vue-cli-service build --target lib --name memorial-ui-component-library --entry ./src/index.ts",
+    "watch": "nodemon --watch src --ext vue,ts,js,scss --exec \"npm run yalc\"",
+    "yalc": "npm run build:lib && yalc publish --push"
   },
   "main": "dist/memorial-ui-component-library.umd.min.js",
   "module": "dist/memorial-ui-component-library.common.min.js",
@@ -61,8 +63,8 @@
     "jest-junit": "^16.0.0",
     "playwright": "^1.51.1",
     "prettier": "^2.4.1",
-    "sass": "^1.81",
-    "sass-loader": "^10",
+    "sass": "^1.87.0",
+    "sass-loader": "^14.2.1",
     "start-server-and-test": "^2.0.11",
     "style-resources-loader": "^1.5.0",
     "ts-jest": "^27.0.4",

package/src/assets/scss/_colors.scss

@@ -0,0 +1,22 @@
+@use 'sass:color';
+
+$--color-black: #000000;
+$--color-grey-primary: #e7e7e7;
+$--color-white: #ffffff;
+$--color-primary: #00284f;
+$--color-secondary: #27779c;
+$color--grey-light-3: #676d74;
+
+
+$--color-grey-focus: color.mix($--color-black, $--color-grey-primary, 10%);
+$--color-checkbox-disabled:color.mix($--color-white, $--color-grey-focus, 80%);
+$--color-rater-hovered:color.mix(black, $--color-primary, 25%);
+$--color-button-hovered:color.mix($--color-white, $--color-primary, 10%);
+$--color-button-active:color.mix($--color-black, $--color-primary, 10%);
+$--color-button-primary-hover:color.mix($--color-white, $--color-primary, 20%);
+
+$--color-button-secondary-hover:color.mix($--color-white, $--color-secondary, 20%);
+$--color-button-secondary-active:color.mix($--color-black, $--color-secondary, 10%);
+
+$--color-button-secondary-active-focus:color.mix($--color-black, $color--grey-light-3, 20%);
+$--color-button-primary-active-text:color.mix($--color-black, $--color-primary, 20%);

package/src/assets/scss/_focus.scss

@@ -0,0 +1,64 @@
+// Define variables at the root level for global access
+:root {
+  --sd-focus-color: #4a90e2; // Blue is generally recommended for focus indicators
+  --sd-focus-width: 2px;
+  --sd-focus-width-secondary: 2px;
+  --sd-focus-offset: 4px;
+  --sd-focus-offset-secondary: 1px;
+  --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;
+  }
+}
+
+// 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;
+}
+
+// Support for high contrast mode
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: var(--sd-focus-width) solid HighlightText !important;
+    outline-offset: var(--sd-focus-offset) !important;
+  }
+}

package/src/assets/scss/_variables.module.scss

@@ -1,3 +1,4 @@
+
 $--transition-all: all .3s cubic-bezier(.645,.045,.355,1);
 $--transition-all-ease: all .3s ease;
 
@@ -18,8 +19,6 @@ $--color-grey-secondary: #9fa7b3;
 $--color-font-default: #2c353f;
 $--color-component-bg: $--color-grey-primary;
 
-$--color-grey-focus: mix($--color-black, $--color-grey-primary, 10%);
-
 $color--grey-primary: #f4f3f3;
 $color--grey-light-1: #e7e7e8;
 $color--grey-light-2: #d8d8d8;

package/src/assets/scss/main.scss

@@ -18,6 +18,11 @@ h1, h2, h3, h4, h5, h6,
 .sd-button,
 header, nav, footer, aside,
 .sd-popout-menu__trigger,
+[id$='__trigger'],
+.menu-pill,
+.menu-pill span,
+[id='name'],
+[id='title'],
 legend {
   font-family: $font-family-headings;
 }