mod-arch-kubeflow 1.0.0 → 1.1.0

package/README.md

@@ -20,11 +20,12 @@ import {
   ThemeProvider,
   useThemeContext,
   style,
-  images
+  images,
+  Theme
 } from 'mod-arch-kubeflow';
 
 // In your app root
-<ThemeProvider theme="mui-theme">
+<ThemeProvider theme={Theme.MUI}>
   <App />
 </ThemeProvider>
 ```

package/dist/style/MUI-theme.scss

@@ -18,6 +18,7 @@
 
   // Button
   --mui-button-FontWeight: 500;
+  --mui-button--BorderWidth: 1px;
   --mui-button--hover--BorderWidth: 1px;
   --mui-button--PaddingBlockStart: 6px;
   --mui-button--PaddingBlockEnd: 6px;
@@ -26,6 +27,9 @@
   --mui-button--LineHeight: 1.75;
   --mui-link-underlineColor: rgba(33, 150, 243, 0.4);
 
+  // Drawer
+  --mui-drawer-BorderLeft: var(--mui-palette-grey-300);
+
   // Helper text
   --mui-helper-text__item--FontWeight: 400;
 
@@ -49,6 +53,8 @@
   --mui-menu-toggle--PaddingInlineEnd: 16px;
   --mui-menu-toggle--ColumnGap: 0;
   --mui-menu-toggle--expanded--Color: black;
+  --mui-menu-toggle--hover--BorderColor: none;
+  --mui-menu-toggle--BorderColor: none;
   --mui-menu-toggle--PaddingInlineStart: 10px;
   --mui-menu-toggle--PaddingInlineEnd: 10px;
 
@@ -103,6 +109,7 @@
   --mui-spacing-12px: calc(1.5 * var(--mui-spacing));
   --mui-spacing-16px: calc(2 * var(--mui-spacing));
 
+  --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
   --pf-t--global--border--width--box--status--default: 1px;
   --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
   --pf-t--global--border--radius--medium: var(--mui-shape-borderRadius);
@@ -117,11 +124,15 @@
 }
 
 .mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
+  --pf-v6-c-button--PaddingInlineStart: 0;
+  --pf-v6-c-button--PaddingInlineEnd: 0;
   border-radius: var(--mui-shape-borderRadius);
 }
 
 .mui-theme .pf-v6-c-alert {
-  --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default);
+  --pf-v6-c-alert--m-warning__title--Color: var(
+    --pf-t--global--text--color--status--warning--default
+  );
   --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
   --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-FontWeight);
   --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
@@ -156,7 +167,6 @@
   --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
   --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
   --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
-  --pf-v6-c-button--m-plain--BorderRadius: 50%;
 
   letter-spacing: 0.02857em;
 }
@@ -168,6 +178,10 @@
   &:hover {
     text-decoration-color: initial;
   }
+
+  &.workspace-kind-summary-button {
+    text-transform: none;
+  }
 }
 
 .mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
@@ -180,12 +194,47 @@
   --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
 }
 
+.mui-theme .pf-v6-c-card {
+  --pf-v6-c-card--BorderWidth: 1px;
+  --pf-v6-c-card--BorderRadius: var(--mui-shape-borderRadius);
+  --pf-v6-c-card--BorderColor: var(--mui-palette-divider);
+}
+
+.mui-theme .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
+  --pf-v6-c-card--BorderColor: var(--mui-palette-grey-300);
+}
+
+.mui-theme .pf-v6-c-card:hover {
+  --pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-100);
+  --pf-v6-c-card--BorderColor: var(--mui-palette-grey-200);
+}
+
+.mui-theme .pf-v6-c-card.pf-m-selected {
+  --pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-200);
+  --pf-v6-c-card--m-selectable--m-selected--BorderColor: transparent;
+}
+
+.mui-theme .pf-v6-c-card.pf-m-selected:hover {
+  --pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-300);
+  --pf-v6-c-card--m-selectable--m-selected--BorderColor: transparent;
+}
+
+.mui-theme .pf-v6-c-description-list__term {
+  font: var(--mui-font-subtitle2);
+}
+
 .mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
   align-content: center;
 }
 
+.mui-theme .pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
+    --mui-drawer-BorderLeft
+  );
+}
+
 .mui-theme .pf-v6-c-form {
-  --pf-v6-c-form--GridGap: none;
+  --pf-v6-c-form--GridGap: 0;
 }
 
 .mui-theme .pf-v6-c-form__group {
@@ -193,8 +242,7 @@
 }
 
 .mui-theme .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
-.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label,
-.mui-theme .pf-v6-c-form__group.location-path {
+.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
   padding-block-start: 10px;
 }
 
@@ -221,20 +269,48 @@
   --pf-v6-c-form__section-title--MarginInlineEnd: 0px;
 }
 
+// Base form label styles
 .mui-theme .pf-v6-c-form__label {
+  color: var(--mui-palette-grey-600);
+  pointer-events: none;
+  transition: all 0.2s ease;
+  --pf-v6-c-form__label-required--Color: currentColor;
+}
+
+// Text input labels (text fields, textareas, selects)
+.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-form-control) .pf-v6-c-form__label,
+.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-text-input-group) .pf-v6-c-form__label {
   position: absolute;
   top: 35%;
   left: 12px;
   font-size: 14px;
-  color: var(--mui-palette-grey-600);
-  pointer-events: none;
-  transition: all 0.2s ease;
   transform-origin: left center;
   transform: translateY(-50%) scale(0.75);
   background-color: var(--mui-palette-common-white);
   padding: 0 4px;
   z-index: 1;
-  --pf-v6-c-form__label-required--Color: currentColor;
+}
+
+// Form controls with number inputs - specific styling overrides
+.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-number-input) {
+  .pf-v6-c-form__label {
+    top: 30%;
+    font-size: 16px;
+    left: 0;
+  }
+
+  .pf-v6-c-form-control {
+    // Override default form control padding to match button padding in this context
+    --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
+    --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
+
+    &.workspace-kind-unit-select {
+      --pf-v6-c-form-control--PaddingInlineEnd: calc(
+        var(--pf-v6-c-form-control__select--PaddingInlineEnd) +
+          var(--pf-v6-c-form-control__icon--FontSize)
+      );
+    }
+  }
 }
 
 .mui-theme .pf-v6-c-form-control input::placeholder {
@@ -253,12 +329,20 @@
   resize: none;
   --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
   --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);
+
+  #text-file-simple-filename {
+    --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
+    --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
+  }
 }
 
 .mui-theme .pf-v6-c-form__section {
   --pf-v6-c-form__section--Gap: 0px;
 }
 
+.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
+  padding: 8px 14px;
+}
 
 .mui-theme .tr-fieldset-wrapper .form-fieldset {
   inset: 0px;
@@ -294,11 +378,27 @@
   box-sizing: border-box;
 }
 
-.mui-theme .pf-v6-c-form-control> :is(input, select, textarea):focus {
-  --pf-v6-c-form-control--OutlineOffset: none;
+.mui-theme .pf-v6-c-form-control > :is(input, select, textarea):focus {
+  --pf-v6-c-form-control--OutlineOffset: 0;
   outline: none;
 }
 
+.mui-theme .workspacekind-form-resource-input,
+.custom-resource-type-input {
+  // Make sure input and select have the same height in ResourceInputWrapper
+  .pf-v6-c-form-control {
+    --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
+    --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
+
+    &:has(select) {
+      --pf-v6-c-form-control--PaddingInlineEnd: calc(
+        var(--pf-v6-c-form-control__select--PaddingInlineEnd) +
+          var(--pf-v6-c-form-control__icon--FontSize)
+      );
+    }
+  }
+}
+
 .mui-theme .pf-v6-c-text-input-group__text-input:focus {
   --pf-v6-c-form-control--OutlineOffset: none;
   outline: none;
@@ -327,15 +427,16 @@
   border-color: var(--mui-palette-common-black);
 }
 
-.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled~.form-fieldset {
+.form-fieldset-wrapper:focus-within span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset,
+.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
   border-color: rgba(0, 0, 0, 0.23);
 }
 
-.form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error~.form-fieldset {
+.form-fieldset-wrapper span.pf-v6-c-form-control.pf-m-error ~ .form-fieldset {
   border-color: var(--mui-palette-error-main);
 }
 
-.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control .pf-m-error~.form-fieldset {
+.form-fieldset-wrapper .pf-v6-c-input-group span.pf-v6-c-form-control .pf-m-error ~ .form-fieldset {
   border-color: var(--mui-palette-error-main);
 }
 
@@ -435,13 +536,18 @@
   --pf-v6-c-form-control--after--BorderColor: transparent !important;
 }
 
-.pf-v6-c-form__group .pf-v6-c-form-control:focus-within+.pf-v6-c-form__label,
-.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown)+.pf-v6-c-form__label {
+.pf-v6-c-form__field-group-body {
+  --pf-v6-c-form__field-group-body--PaddingBlockStart: 8px;
+}
+
+.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
   color: var(--mui-palette-primary-main);
 }
 
 .pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
   --pf-v6-c-form-control--after--BorderWidth: 2px;
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
 }
 
 .pf-v6-c-form-control.pf-m-error {
@@ -490,18 +596,12 @@
   --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
 }
 
-.mui-theme .pf-v6-c-menu__item.pf-m-selected {
-  --pf-v6-c-menu__item--BackgroundColor: var(--mui-menu__item--selected--BackgroundColor);
-}
-
-.mui-theme .pf-v6-c-menu__item-select-icon {
-  display: none;
-}
-
-.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-plain) {
+.mui-theme .pf-v6-c-menu-toggle {
   --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
   --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
-  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
+    --mui-menu-toggle--expanded--BackgroundColor
+  );
   --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
@@ -509,49 +609,20 @@
   --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
   --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
-  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--mui-palette-primary-dark);
-  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--mui-palette-common-white);
-  --pf-v6-c-menu-toggle--disabled--Color: var(--mui-palette-text-disabled);
-  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--mui-palette-action-disabled);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
+    --pf-t--global--background--color--action--plain--hover
+  );
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
+    --pf-t--global--color--brand--default
+  );
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
+    --mui-palette-primary-dark
+  );
 
-  border-radius: var(--mui-shape-borderRadius);
   font-weight: var(--mui-button-FontWeight);
   letter-spacing: 0.02857em;
-}
+  height: 37px;
 
-// Apply the menu toggle styling to all except split button variant
-.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) {
-  position: relative;
-  box-sizing: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.23);
-  --pf-v6-c-menu-toggle--BackgroundColor: var(--mui-palette-common-white);
-
-  &:hover {
-    // Restore direct border color setting for hover
-    border-color: var(--mui-palette-common-black);
-  }
-
-  &:focus-within {
-    // Keep border width consistent to prevent layout shift
-    border: 1px solid var(--mui-palette-primary-main);
-    // Use box-shadow to create a thicker border while preventing layout shift
-    box-shadow: 0 0 0 1px var(--mui-palette-primary-main);
-  }
-}
-
-.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
-  --pf-v6-c-menu-toggle--BorderRadius: 50%;
-  // Ensure plain variant doesn't get the border styling
-  border: none;
-
-  &:hover,
-  &:focus-within {
-    border: none;
-    box-shadow: none;
-    background-color: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
-  }
 }
 
 .mui-theme .pf-v6-c-menu-toggle__button {
@@ -560,14 +631,6 @@
   align-self: stretch;
 }
 
-.mui-theme .pf-v6-c-menu-toggle.pf-m-disabled {
-  border: solid 1px var(--mui-palette-action-disabled);
-}
-
-.mui-theme .pf-v6-c-menu-toggle.pf-m-plain {
-  --pf-v6-c-menu-toggle--BorderRadius: 50%;
-}
-
 .mui-theme .pf-v6-c-menu-toggle.pf-m-primary {
   --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-white);
   --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
@@ -578,8 +641,19 @@
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
 }
 
-.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark);
+.mui-theme
+  .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
+  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
+    --mui-palette-primary-dark
+  );
+}
+
+.pf-v6-c-menu-toggle.pf-m-secondary.pf-m-split-button {
+  --pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-primary-main);
+  --pf-v6-c-menu-toggle--BorderWidth: var(--mui-button--BorderWidth);
+  --pf-v6-c-menu-toggle--BorderStyle: solid;
+  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-primary-dark);
 }
 
 .mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
@@ -606,52 +680,22 @@
   display: block;
 }
 
-.mui-theme .pf-v6-c-nav {
-  padding-block-start: 0;
-}
-
-.mui-theme .pf-v6-c-nav__link {
-  --pf-v6-c-nav__link--BorderRadius: 0px;
-  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
-  --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
-  --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
-  --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
-
-  &.active {
-    border-left: 3px solid var(--mui-palette-common-white);
-    --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
-    --pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
-  }
-
-  &.pf-v6-c-brand {
-    --pf-v6-c-nav__link--hover--BackgroundColor: none;
-  }
-}
-
-.mui-theme .pf-v6-c-nav__link:focus {
-  --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
-}
-
-.mui-theme .pf-v6-c-nav__list {
-  row-gap: none;
-}
-
 .mui-theme .pf-v6-radio {
   --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
 }
 
-.mui-theme .pf-v6-c-radio {
+.mui-theme .pf-v6-c-radio:not(.pf-v6-c-card .pf-v6-c-radio) {
   display: flex;
   align-items: center;
   margin: var(--mui-radio--margin);
 }
 
-.mui-theme .pf-v6-c-radio__input {
+.mui-theme .pf-v6-c-radio__input:not(.pf-v6-c-card .pf-v6-c-radio__input) {
   /* Hide default radio button */
   display: none;
 }
 
-.mui-theme .pf-v6-c-radio__label {
+.mui-theme .pf-v6-c-radio__label:not(.pf-v6-c-card .pf-v6-c-radio__label) {
   --pf-v6-c-radio__label--FontSize: 16px;
   padding-left: var(--mui-radio-PaddingLeft);
   position: relative;
@@ -660,7 +704,7 @@
 }
 
 /* Custom radio circle */
-.mui-theme .pf-v6-c-radio__label::before {
+.mui-theme .pf-v6-c-radio__label:not(.pf-v6-c-card .pf-v6-c-radio__label)::before {
   content: '';
   position: absolute;
   left: 0;
@@ -674,19 +718,51 @@
 }
 
 /* When radio is checked */
-.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::before {
+.mui-theme .pf-v6-c-radio__input:not(.pf-v6-c-card .pf-v6-c-radio__input):checked + .pf-v6-c-radio__label::before {
   background: var(--mui-palette-common-white);
   border-color: var(--mui-palette-primary-main);
 }
 
+.mui-theme .pf-v6-c-nav {
+  padding-block-start: 0;
+}
+
+.mui-theme .pf-v6-c-nav__link {
+  --pf-v6-c-nav__link--BorderRadius: 0px;
+  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
+  --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
+
+  &.pf-m-current {
+    border-left: 3px solid var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--m-current--BackgroundColor: #ffffff1b;
+    --pf-v6-c-nav__link--m-current--Color: var(--mui-palette-common-white);
+  }
+
+  &.pf-v6-c-brand {
+    --pf-v6-c-nav__link--hover--BackgroundColor: transparent;
+  }
+}
+
+.mui-theme .pf-v6-c-nav__link:focus {
+  --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
+}
+
+.mui-theme .pf-v6-c-nav__list {
+  row-gap: 0;
+}
+
 .mui-theme .pf-v6-c-page__sidebar {
-  position: fixed;
-  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
-  --pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
-  height: 100vh;
-  z-index: 300;
-  display: flex;
-  flex-direction: column;
+position: fixed;
+--pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
+--pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
+height: 100vh;
+z-index: 1200;
+display: flex;
+flex-direction: column;
+top: 0;
+left: 0;
 }
 
 .mui-theme .pf-v6-c-page__sidebar-body {
@@ -696,8 +772,20 @@
   overflow-y: auto;
 }
 
+.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
+  --pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-primary-main);
+}
+
+.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
+  --pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-success-main);
+}
+
+.mui-theme .pf-v6-c-radio.pf-m-standalone:not(.workspace-kind-form-radio) .pf-v6-c-radio__input {
+  display: none;
+}
+
 /* Inner dot for checked state */
-.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::after {
+.mui-theme .pf-v6-c-radio__input:not(.pf-v6-c-card .pf-v6-c-radio__input):checked + .pf-v6-c-radio__label::after {
   content: '';
   position: absolute;
   left: 5px;
@@ -727,11 +815,15 @@
   --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
   --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
-  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
+    --mui-table--cell--first-last-child--PaddingInline
+  );
   --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-FontWeight);
   --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
   --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
-  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
+    --mui-table__sort-indicator--MarginInlineStart
+  );
 
   letter-spacing: 0.01071em;
 }
@@ -750,6 +842,11 @@
   align-self: start;
 }
 
+/* CSS workaround for spacing in labels in Workspace Kind */
+.form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+  padding-block-start: 0px;
+}
+
 /* CSS workaround to use MUI icon for sort icon */
 .mui-theme .pf-v6-c-table__sort-indicator::before {
   display: block;
@@ -784,6 +881,13 @@
   --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 }
 
+.pf-v6-c-tab-content__body.pf-m-padding {
+  --pf-v6-c-tab-content__body--PaddingInlineStart: 0px;
+  --pf-v6-c-tab-content__body--PaddingInlineEnd: 0px;
+  --pf-v6-c-tab-content__body--PaddingBlockStart: var(--mui-spacing-8px);
+  --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--mui-spacing-8px);
+}
+
 .mui-theme .pf-v6-c-tabs {
   --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
   --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
@@ -795,7 +899,9 @@
   --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
   --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
   --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
-  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
+    --mui-tabs__item--m-current__link--after--BorderWidth
+  );
   --pf-v6-c-tabs__link--FontSize: 0.875rem;
 }
 
@@ -816,8 +922,10 @@
   align-content: center;
 }
 
-.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select>.pf-v6-c-menu-toggle.pf-m-disabled {
-  border: none;
+// Updates the expand button to be 36.5px wide to match menu toggle button width
+.mui-theme .pf-v6-c-table__td.pf-v6-c-table__toggle .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button--PaddingInlineStart: 6px;
+  --pf-v6-c-button--PaddingInlineEnd: 6px;
 }
 
 .mui-theme .pf-v6-c-label {
@@ -854,6 +962,10 @@
   box-shadow: var(--mui-shadows-1);
 }
 
+.mui-theme .pf-v6-c-toolbar__item.kubeflow-u-namespace-select > .pf-v6-c-menu-toggle.pf-m-disabled {
+  border: none;
+}
+
 .mui-theme .pf-v6-c-label.pf-m-outline {
   --pf-v6-c-label--BorderColor: none;
   --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
@@ -867,35 +979,56 @@
 
 .mui-theme .pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius);
-  --pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24)
-}
-
-.mui-theme .pf-v6-c-button.pf-m-plain {
-  --pf-v6-c-button--BorderRadius: 50%;
+  --pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24);
 }
 
 .mui-theme .pf-v6-c-page {
-  --pf-v6-c-page--BackgroundColor: var(--mui-palette-common-white);
+  --pf-v6-c-page--BackgroundColor: transparent;
+  background: linear-gradient(to right, 
+    var(--kf-central-primary-background-color) 0, 
+    var(--kf-central-primary-background-color) var(--kf-central-app-drawer-width),
+    var(--mui-palette-grey-100) var(--kf-central-app-drawer-width),
+    var(--mui-palette-grey-100) 100%);
+  width: 100vw;
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 
 .mui-theme .pf-v6-c-page__main {
-  --pf-v6-c-page__main--PaddingRight: 0;
-  overflow: visible;
-  margin-right: 2px;
+  // background-color: var(--mui-palette-grey-100);
+  // width: calc(100vw - var(--kf-central-app-drawer-width));
+  // max-width: calc(100vw - var(--kf-central-app-drawer-width));
+  // box-sizing: border-box;
 }
 
-.mui-theme .pf-v6-c-page__main-section {
-  --pf-v6-c-page__main-section--PaddingRight: 0;
-  overflow: visible;
-  margin-right: 2px;
-  gap: 0;
+.mui-theme .pf-v6-c-page__main-container {
+  --pf-v6-c-page__main-container--BorderWidth: 0px;
+  --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
+  box-shadow: var(--mui-shadows-1);
+  margin: 0;
+  margin-top: var(--kf-central-app-bar-height);
+  margin-right: 24px;
+  padding: 8px 24px;
 }
 
-.mui-theme .pf-v6-c-page__main-container {
-  overflow: visible;
-  margin-right: 2px;
+.mui-theme .pf-v6-c-page__main-group.pf-m-sticky-top {
+  flex-grow: 0;
 }
 
+// TODO: Remove when https://github.com/patternfly/patternfly-react/issues/11826 is resolved.
+.pf-v6-c-page__main-section .pf-v6-c-page__main-body {
+  height: 100%;
+  --pf-v6-c-page__main-section--PaddingInlineStart: 0px;
+}
+
+.mui-theme .pf-v6-c-page__main-section {
+  --pf-v6-c-page__main-section--PaddingBlockStart: 8px;
+  --pf-v6-c-page__main-section--PaddingBlockEnd: 8px;
+  --pf-v6-c-page__main-section--PaddingInlineStart: 0px;
+  --pf-v6-c-page__main-section--PaddingInlineEnd: 0px;
+}
+
+
 .mui-theme .pf-v6-c-pagination {
   --pf-v6-c-pagination__total-items--Display: block;
 }
@@ -918,35 +1051,57 @@
   content: 'Rows per page:';
 }
 
+
+
+
+
+.mui-theme .pf-v6-c-page.embedded {
+  .pf-v6-c-page__main-container {
+    margin: 0px;
+  }
+}
+
 /* Hide Masthead Toggle by default */
 .mui-theme .pf-v6-c-masthead__toggle {
   display: none;
 }
 
-/* Show Masthead Toggle on viewports below 1270px */
-@media (max-width: 1200px) {
+  /* Show Masthead Toggle on viewports below 1270px */
+@media (max-width: 1270px) {
   .mui-theme .pf-v6-c-masthead__toggle {
     display: block;
     padding-block-start: var(--mui-spacing-4px);
   }
+  
+  .mui-theme .pf-v6-c-page__main {
+    width: 100vw;
+    max-width: 100vw;
+  }
+  
+  .mui-theme .pf-v6-c-page {
+    background: var(--mui-palette-grey-100);
+  }
+}
 
-  .mui-theme .pf-v6-c-page__main-container {
-    margin-left: 0;
+@media (min-width: 1270px) {
+  .mui-theme .pf-v6-c-masthead {
+    padding-left: var(--kf-central-app-drawer-width);
   }
 }
 
-.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed)+.pf-v6-c-page__main-container,
-.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed)+.pf-v6-c-page__drawer,
-.mui-theme .pf-v6-c-page__sidebar:not(.pf-m-collapsed)+.pf-v6-c-page__main-breadcrumb {
-  --pf-v6-c-page__main-container--MarginInlineStart: calc(-2 * var(--mui-spacing-16px));
-  --pf-v6-c-page__main-section--PaddingInlineStart: none;
-  --pf-v6-c-page__main-section--PaddingInlineEnd: none;
-  --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: none;
+.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-form-control {
+  // Override default form control padding to match button padding in this context
+  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
+  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
 }
 
-.pf-v6-c-page__sidebar.pf-m-collapsed+.pf-v6-c-page__main-container {
-  --pf-v6-c-page__main-container--MarginInlineStart: calc(-1 * var(--mui-spacing-8px));
-  --pf-v6-c-page__main-container--MarginInlineEnd: calc(-1 * var(--mui-spacing-8px));
+// Fix hover state margin issue by removing problematic padding
+.mui-theme .pf-v6-c-menu__list {
+  --pf-v6-c-content--list--PaddingInlineStart: 0;
+}
+
+.mui-theme .pf-v6-c-expandable-section .pf-v6-c-expandable-section__content {
+  margin-block-end: var(--mui-spacing-16px);
 }
 
 .mui-theme .pf-v6-c-form__group-control .pf-v6-c-menu-toggle.pf-m-full-width.pf-m-typeahead {
@@ -965,25 +1120,36 @@
     border-width: 2px;
     background-color: var(--mui-palette-common-white);
   }
+}
+
+.mui-theme .workspacekind-file-upload {
+  height: 100%;
 
-  .pf-v6-c-text-input-group__text-input {
-    padding-left: var(--mui-spacing-12px);
+  .pf-v6-c-file-upload__file-details {
+    flex-grow: 1;
   }
 }
 
-.mui-theme .pf-v6-c-toolbar__item.toolbar-fieldset-wrapper,
-.mui-theme .toolbar-fieldset-wrapper {
-  position: relative;
-  width: 100%;
-  display: flex;
-  height: 51px;
+/* Workaround for Toggle group header in Workspace Kind Form */
+.mui-theme .workspace-kind-form-header .pf-v6-c-toggle-group__button.pf-m-selected {
+  background-color: #e0f0ff;
+  color: var(--pf-t--color--black);
 }
 
-.mui-theme .toolbar-fieldset-wrapper:hover .form-fieldset {
-  border-color: var(--mui-palette-common-black);
+
+.mui-theme .pf-v6-c-menu__item.pf-m-selected {
+  --pf-v6-c-menu__item--BackgroundColor: var(--mui-menu__item--selected--BackgroundColor);
 }
 
-.mui-theme .toolbar-fieldset-wrapper:focus-within .form-fieldset,
-.mui-theme .tr-fieldset-wrapper:focus-within .form-fieldset {
-  border-color: var(--mui-palette-primary-main);
+.mui-theme .pf-v6-c-menu__item-select-icon {
+  display: none;
+}
+
+.mui-theme button.pf-v6-c-menu-toggle {
+  // Use box-shadow to create a border effect without affecting the layout
+  &.pf-m-expanded,
+  &:focus {
+    box-shadow: 0 0 0 2px var(--mui-palette-primary-main);
+    outline: none; // Remove default browser outline
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-arch-kubeflow",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Kubeflow-specific theme and UI components for modular architecture micro-frontend projects",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -20,7 +20,12 @@
   "scripts": {
     "build": "tsc && tsc-alias && npm run copy-assets",
     "copy-assets": "mkdir -p dist/style dist/images && cp -r style/* dist/style/ && cp -r images/* dist/images/",
+    "test": "run-s test:lint test:unit test:type-check",
+    "test:jest": "jest --passWithNoTests",
+    "test:unit": "npm run test:jest -- --silent",
     "test:type-check": "tsc --noEmit",
+    "test:fix": "eslint --ext .js,.ts,.jsx,.tsx . --fix",
+    "test:lint": "eslint --max-warnings 0 --ext .js,.ts,.jsx,.tsx .",
     "prepare": "npm run build"
   },
   "repository": {
@@ -42,6 +47,9 @@
   ],
   "author": "OpenDataHub.io",
   "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "react": ">=16.8.0",
     "@mui/material": "^6.0.0"
@@ -49,9 +57,26 @@
   "devDependencies": {
     "@mui/material": "^6.1.7",
     "@types/react": "^18.3.1",
+    "npm-run-all2": "^7.0.1",
     "react": "^18.3.1",
     "sass": "^1.83.0",
     "tsc-alias": "^1.8.15",
     "typescript": "^5.0.4"
+  },
+  "optionalDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-node": "^0.3.7",
+    "eslint-import-resolver-typescript": "^3.8.3",
+    "eslint-plugin-cypress": "^3.3.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-no-relative-import-paths": "^1.6.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.2.0"
   }
 }