@dataloop-ai/components 0.17.49 → 0.17.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.49",
+  "version": "0.17.51",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlButton/DlButton.vue

@@ -312,9 +312,12 @@ export default defineComponent({
                         filled: this.filled,
                         color: this.color
                     }),
-                    '--dl-button-text-color-pressed':
-                        'var(--dl-button-text-color)',
-                    '--dl-button-bg-pressed': 'var(--dl-button-bg)',
+                    '--dl-button-text-color-pressed': this.shaded
+                        ? 'var(--dl-color-text-buttons)'
+                        : 'var(--dl-button-text-color)',
+                    '--dl-button-bg-pressed': this.shaded
+                        ? 'var(--dl-color-secondary)'
+                        : 'var(--dl-button-bg)',
                     '--dl-button-border-pressed': 'var(--dl-button-border)'
                 }
             }

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -123,15 +123,7 @@ export default defineComponent({
                         : 'flex-end',
                 '--option-group-width':
                     this.leftLabel && !this.inline ? '100%' : 'auto',
-                '--option-group-max-width': this.maxWidth,
-                '--control-element-padding-left': this.leftLabel
-                    ? '10px'
-                    : this.inline
-                    ? '12px'
-                    : '0px',
-                '--control-element-padding-right': this.leftLabel
-                    ? '0px'
-                    : '10px'
+                '--option-group-max-width': this.maxWidth
             }
         }
     },
@@ -160,6 +152,11 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.control-element {
+    display: flex;
+    align-items: center;
+}
+
 .tooltip-icon {
     color: var(--dl-color-medium);
     display: flex !important;
@@ -181,8 +178,9 @@ export default defineComponent({
     justify-content: var(--option-justify-content);
     font-size: var(--dl-font-size-body);
     user-select: none;
-    height: 24px;
     color: var(--dl-color-darker);
+    margin: 10px 5px;
+    gap: 5px;
 }
 
 .disabled {
@@ -192,9 +190,4 @@ export default defineComponent({
     }
     color: var(--dl-color-disabled);
 }
-
-.control-element {
-    padding-left: var(--control-element-padding-left);
-    padding-right: var(--control-element-padding-right);
-}
 </style>

package/src/components/essential/DlCheckbox/DlCheckbox.vue

@@ -103,7 +103,7 @@ export default defineComponent({
         indeterminateValue: { type: ValueTypes, default: null },
         value: { type: ValueTypes, default: null },
         falseValue: { type: ValueTypes, default: false },
-        padding: { type: String, default: '5px' },
+        padding: { type: String, default: '0' },
         trueValue: { type: ValueTypes, default: true },
         tabindex: { type: String, default: '0' },
         subLabelSize: { type: String, default: '10px' }
@@ -242,7 +242,7 @@ export default defineComponent({
     display: inline-flex;
     max-width: max-content;
     align-items: center;
-    gap: 10px;
+    gap: 6px;
     padding: var(--dl-checkbox-padding);
     user-select: none;
 }

package/src/components/essential/DlRadio/DlRadio.vue

@@ -76,7 +76,7 @@ export default defineComponent({
         disabled: { type: Boolean, default: false },
         id: { type: [String, Number], default: null },
         label: { type: String, default: null },
-        padding: { type: String, default: '5px' },
+        padding: { type: String, default: '0' },
         modelValue: { type: [String, Number, Boolean], required: true },
         value: { type: [String, Number, Boolean], required: true },
         tabindex: { type: String, default: '0' },