Merge branch 'shadow-control-2.0' into themes3-grand-finale-maybe

src/components/component_preview/component_preview.vue

@@ -168,6 +168,7 @@
     }
 
     .preview-block {
+      background: var(--background, var(--bg));
       display: flex;
       justify-content: center;
       align-items: center;
@@ -178,6 +179,8 @@
       border-width: 0;
       border-style: solid;
       border-color: var(--border);
+      border-radius: var(--roundness);
+      box-shadow: var(--shadow);
     }
   }
 }

src/components/select/select.vue

@@ -61,12 +61,13 @@ label.Select {
   &:disabled {
     background-color: var(--background);
     opacity: 1; /* override browser */
+    color: var(--faint);
 
     select {
       &[multiple],
       &[size] {
         option.-active {
-          color: var(--text);
+          color: var(--faint);
           background: transparent;
         }
       }

src/components/shadow_control/shadow_control.js

@@ -36,7 +36,7 @@ export default {
   props: [
     'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
   ],
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'subShadowSelected'],
   data () {
     return {
       selectedId: 0,
@@ -93,9 +93,13 @@ export default {
       }
     }
   },
+  watch: {
+    selected (value) {
+      this.$emit('subShadowSelected', this.selectedId)
+    }
+  },
   methods: {
     updateProperty: throttle(function (prop, value) {
-      console.log(prop, value)
       this.cValue[this.selectedId][prop] = value
       if (prop === 'inset' && value === false && this.separateInset) {
         this.cValue[this.selectedId].spread = 0