ms-design-system 0.0.58 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ms-design-system",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "style": "src/styles.scss",
   "dependencies": {
     "ng-inline-svg": "^13.1.1",

package/src/assets/scss/components/_dropdown.scss

@@ -517,4 +517,7 @@
 }
 input:focus-visible {
   outline: none;
+}
+button.ms-dropdown-item:disabled .ms-country-label {
+  color: #ABABAB;
 }

package/src/assets/scss/components/_text-area.scss

@@ -158,7 +158,11 @@
 // List type styles for textarea
 .ms-textArea {
     max-width: 100%;
-width: -webkit-fill-available;
+    width: -webkit-fill-available;
+    &:disabled {
+        background: #F5F5F5;
+        cursor: not-allowed;
+    }
     &.list-bulleted {
         list-style-type: disc;
     }
@@ -318,7 +322,7 @@ width: -webkit-fill-available;
             }
         }
     }
-
+ 
     // Thumbnail Grid (no names, just images)
     .thumbnail-grid {
         display: flex;
@@ -329,7 +333,7 @@ width: -webkit-fill-available;
         border: 1px solid #e5e7eb;
         border-radius: 4px;
         background-color: #f9fafb;
-
+ 
         .thumbnail-item {
             position: relative;
             width: 60px;
@@ -338,23 +342,23 @@ width: -webkit-fill-available;
             overflow: hidden;
             border: 2px solid #d1d5db;
             transition: all 0.2s ease;
-
+ 
             &:hover {
                 border-color: #3b82f6;
                 transform: scale(1.05);
-
+ 
                 .thumbnail-remove {
                     opacity: 1;
                 }
             }
-
+ 
             img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 display: block;
             }
-
+ 
             .thumbnail-remove {
                 position: absolute;
                 top: -6px;
@@ -375,14 +379,14 @@ width: -webkit-fill-available;
                 transition: opacity 0.2s ease;
                 padding: 0;
                 line-height: 1;
-
+ 
                 &:hover {
                     background: #dc2626;
                 }
             }
         }
     }
-
+ 
     // Compact view after images inserted
     .compact-image-section {
         .thumbnail-row {
@@ -390,7 +394,7 @@ width: -webkit-fill-available;
             flex-wrap: wrap;
             gap: 8px;
             margin-bottom: 8px;
-
+ 
             .upload-thumbnail-box {
                 width: 60px;
                 height: 60px;
@@ -402,17 +406,17 @@ width: -webkit-fill-available;
                 cursor: pointer;
                 background-color: #f9fafb;
                 transition: all 0.2s ease;
-
+ 
                 &:hover {
                     border-color: #3b82f6;
                     background-color: #eff6ff;
                 }
-
+ 
                 svg {
                     stroke: #6b7280;
                 }
             }
-
+ 
             .compact-thumbnail {
                 position: relative;
                 width: 60px;
@@ -421,23 +425,23 @@ width: -webkit-fill-available;
                 overflow: hidden;
                 border: 2px solid #d1d5db;
                 transition: all 0.2s ease;
-
+ 
                 &:hover {
                     border-color: #3b82f6;
                     transform: scale(1.05);
-
+ 
                     .compact-remove {
                         opacity: 1;
                     }
                 }
-
+ 
                 img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                     display: block;
                 }
-
+ 
                 .compact-remove {
                     position: absolute;
                     top: -6px;
@@ -458,7 +462,7 @@ width: -webkit-fill-available;
                     transition: opacity 0.2s ease;
                     padding: 0;
                     line-height: 1;
-
+ 
                     &:hover {
                         background: #dc2626;
                     }
@@ -543,12 +547,12 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
     background: transparent;
     border: none;
 }
-
+ 
 // AI Content Generation Dropdown
 .ai-dropdown {
   width: 320px;
   max-width: 90vw;
-
+ 
   .ai-header {
     font-size: 14px;
     font-weight: 600;
@@ -557,7 +561,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
     padding-bottom: 8px;
     border-bottom: 1px solid #e5e7eb;
   }
-
+ 
   .ai-prompt-input {
     width: 100%;
     padding: 10px;
@@ -568,13 +572,13 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
     resize: vertical;
     min-height: 80px;
     transition: border-color 0.2s ease;
-
+ 
     &:focus {
       outline: none;
       border-color: #3b82f6;
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     }
-
+ 
     &::placeholder {
       color: #9ca3af;
     }
@@ -603,7 +607,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
     background-position: -200% 0;
   }
 }
-
+ 
 // Inserted Images Gallery
 .inserted-images-gallery {
   margin-top: 12px;
@@ -611,42 +615,42 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
   background-color: #f9fafb;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
-
+ 
   .gallery-label {
     font-size: 13px;
     font-weight: 600;
     color: #374151;
     margin-bottom: 8px;
   }
-
+ 
   .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
     gap: 8px;
     max-height: 200px;
     overflow-y: auto;
-
+ 
     .gallery-item {
       position: relative;
       border-radius: 6px;
       overflow: visible;
       border: 2px solid #d1d5db;
       transition: border-color 0.2s ease;
-
+ 
       &:hover {
         border-color: #3b82f6;
         z-index: 10;
-
+ 
         .gallery-overlay {
           opacity: 1;
         }
-
+ 
         .resize-handle,
         .remove-gallery-btn {
           opacity: 1;
         }
       }
-
+ 
       .gallery-thumbnail {
         width: 100%;
         height: 100%;
@@ -655,7 +659,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
         border-radius: 4px;
         user-select: none;
       }
-
+ 
       // Four corner resize handles
       .resize-handle {
         position: absolute;
@@ -664,11 +668,11 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
         opacity: 0;
         transition: opacity 0.2s ease;
         z-index: 10;
-
+ 
         &:hover {
           background: #2563eb;
         }
-
+ 
         // Corners (8x8 squares)
         &.nw {
           top: -4px;
@@ -678,7 +682,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           cursor: nw-resize;
           border-radius: 2px;
         }
-
+ 
         &.ne {
           top: -4px;
           right: -4px;
@@ -687,7 +691,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           cursor: ne-resize;
           border-radius: 2px;
         }
-
+ 
         &.sw {
           bottom: -4px;
           left: -4px;
@@ -696,7 +700,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           cursor: sw-resize;
           border-radius: 2px;
         }
-
+ 
         &.se {
           bottom: -4px;
           right: -4px;
@@ -705,7 +709,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           cursor: se-resize;
           border-radius: 2px;
         }
-
+ 
         // Sides (smaller rectangles)
         &.n {
           top: -4px;
@@ -716,7 +720,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           cursor: n-resize;
           border-radius: 1px;
         }
-
+ 
         &.s {
           bottom: -4px;
           left: 50%;
@@ -726,7 +730,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           cursor: s-resize;
           border-radius: 1px;
         }
-
+ 
         &.e {
           right: -4px;
           top: 50%;
@@ -736,7 +740,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           cursor: e-resize;
           border-radius: 1px;
         }
-
+ 
         &.w {
           left: -4px;
           top: 50%;
@@ -747,7 +751,7 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
           border-radius: 1px;
         }
       }
-
+ 
       .remove-gallery-btn {
         position: absolute;
         top: 4px;
@@ -769,12 +773,12 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
         z-index: 11;
         padding: 0;
         line-height: 1;
-
+ 
         &:hover {
           background: rgba(220, 38, 38, 1);
         }
       }
-
+ 
       .gallery-overlay {
         position: absolute;
         bottom: 0;
@@ -793,11 +797,11 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
         display: flex;
         flex-direction: column;
         gap: 2px;
-
+ 
         .image-id {
           font-weight: 500;
         }
-
+ 
         .image-size {
           font-size: 8px;
           color: #d1d5db;
@@ -805,4 +809,5 @@ ms-dropdown ::ng-deep .ms-dropdown-input-field {
       }
     }
   }
-}
+}
+ 

package/src/assets/scss/components/_text-field.scss

@@ -6,7 +6,6 @@
     border: 1px solid var(--semantics-border-brand-default, #0084FF);
 }
 .ms-focus{
-    box-shadow: 0px 0px 0px 1px var(--primitivesbrandblue-100);
     border: 1px solid var(--semantics-border-brand-default, #0084FF);
     box-shadow: 0 0 0 2px rgba(0,82,204,0.2);
 }
@@ -623,4 +622,43 @@
 .ms-focus {
   border: 1px solid var(--semantics-border-brand-default, #0084FF);
   box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
+}
+.ms-form-control {
+  padding: .6rem .8rem;
+  border: 1px solid #E0E0E0;
+  border-radius: 8px;
+  font-size: .95rem;
+  transition: border-color .2s, box-shadow .2s;
+  background: #fff;
+  color: #1b1f22;
+  font-family: Segoe UI, sans-serif;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+  height: 10px;
+  gap: 6;
+  opacity: 1;
+  border-width: 1px;
+  padding: 12px 8px;
+  width: -webkit-fill-available;
+  &.ms-hover{
+    border: 1px solid var(--semantics-border-brand-default, #0084FF);
+  }
+  &.ms-focus{
+    border: 1px solid var(--semantics-border-brand-default, #0084FF);
+    box-shadow: 0 0 0 2px rgba(0,82,204,0.2);
+  }
+  &.ms-error{
+    box-shadow: 0px 0px 0px 1px #DA3E3740;
+    border: 1px solid var(--semantics-border-brand-default, #dc2626);
+  }
+  &.ms-warning{
+      box-shadow: 0px 0px 0px 1px #FFE1BF;
+    border: 1px solid var(--semantics-border-brand-default, #F58600);
+  }
+  &:disabled{
+    background: var(--semantics-surface-subtle-primary-disabled, #F5F5F5);
+    cursor: not-allowed;
+  }
 }